web-dev-qa-db-ja.com

列幅をjQueryデータテーブルに設定する方法は？

私はjQueryのデータテーブル（赤で囲まれています）を持っていますが、何が起こるかは、divに設定した幅（650ピクセル）からテーブルが飛び出すことです。

以下がスクリーンショットです。 enter image description here

ここに私のコードがあります：

<script type="text/javascript">

    var ratesandcharges1;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges1").dataTable({
            "bRetrieve": false,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": false,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '10%' } ]
        });

        ratesandcharges1.fnDraw();

    });
</script>
<div id="ratesandcharges1Div" style="width: 650px;"> 


<table id="ratesandcharges1" class="grid" >
    <thead>
        <!--Header row-->
        <tr>
            <th>Charge Code</th>
            <th>Rates</th>
            <th>Quantity</th>
            <th>Total Charge</th>
            <th>VAT %</th>
            <th>Calc. Type</th>
            <th>Paid By</th>
            <th>From</th>
            <th>To</th>
            <th>VAT</th>
            <th>MVGB</th>
         </tr>
    </thead>
    <!--Data row-->
    <tbody>
        <tr>
            <td>Day/Tag</td>
            <td>55.00</td>
            <td>3.00</td>
            <td>165.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Bill-to/Agent</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>33.00</td>
            <td>1.98</td>
        </tr>
        <tr>
            <td>PAI</td>
            <td>7.50</td>
            <td>3.00</td>
            <td>22.50</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.50</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>BCDW</td>
            <td>15.00</td>
            <td>3.00</td>
            <td>45.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>9.00</td>
            <td>0.54</td>
        </tr>
        <tr>
            <td>BTP</td>
            <td>7.15</td>
            <td>3.00</td>
            <td>21.45</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.29</td>
            <td>0.26</td>
        </tr>
    </tbody>
</table>
</div>

何か案は ？

ありがとう

jqueryjquery-uidatatables
33
Haxed

テーブル自体の幅を設定してみてください。

<table id="ratesandcharges1" class="grid" style="width: 650px;">

650を数ピクセル調整して、パディング、余白、境界線を調整する必要があります。

ただし、おそらくまだいくつかの問題があります。ヘッダーを変更したり、フォントサイズを小さくしたり、その他のbitさを感じさせたりしない限り、これらすべての列に十分な水平スペースがありません。

13
mu is too short

私はこれを456 Bera St. Manで見つけました、それは命の恩人です!!!

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

しかし、-あなたはあなたのデータをspareしむ余地があまりありません。

CSS FTW：

<style>
table {
    table-layout:fixed;
}
td{
    overflow:hidden;
    text-overflow: Ellipsis;
}
</style>
34
John K

構成オプション：

$(document).ready(function () {

  $("#companiesTable").dataTable({
    "sPaginationType": "full_numbers",
    "bJQueryUI": true,
    "bAutoWidth": false, // Disable the auto width calculation 
    "aoColumns": [
      { "sWidth": "30%" }, // 1st column width 
      { "sWidth": "30%" }, // 2nd column width 
      { "sWidth": "40%" } // 3rd column width and so on 
    ]
  });
});

テーブルのcssを指定します。

table.display {
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed;         // add this 
  Word-wrap:break-Word;        // add this 
}

HTML：

<table id="companiesTable" class="display"> 
  <thead>
    <tr>
      <th>Company name</th>
      <th>Address</th>
      <th>Town</th>
    </tr>
  </thead>
  <tbody>

    <% for(Company c: DataRepository.GetCompanies()){ %>
      <tr>  
        <td><%=c.getName()%></td>
        <td><%=c.getAddress()%></td>
        <td><%=c.getTown()%></td>
      </tr>
    <% } %>

  </tbody>
</table>

わたしにはできる！

23
Ajit Nalawade

公式サイトからの回答

https://datatables.net/reference/option/columns.width

$('#example').dataTable({
    "columnDefs": [
        {
            "width": "20%",
            "targets": 0
        }
    ]
});
3
Kevin Khew

他のすべてのソリューションを試した後、私にとってこれがうまくいくことがわかった最良のソリューション....基本的には、sScrollXを200％に設定し、個々の列幅を必要な％に設定します。使用する列が多くなり、必要なスペースが増えると、sScrollXを上げる必要があります％... nullは、それらの列に、コードで設定したデータテーブルの自動幅を保持することを意味します。 enter image description here

            $('#datatables').dataTable
            ({  
                "sScrollX": "200%", //This is what made my columns increase in size.
                "bScrollCollapse": true,
                "sScrollY": "320px",

                "bAutoWidth": false,
                "aoColumns": [
                    { "sWidth": "10%" }, // 1st column width 
                    { "sWidth": "null" }, // 2nd column width 
                    { "sWidth": "null" }, // 3rd column width
                    { "sWidth": "null" }, // 4th column width 
                    { "sWidth": "40%" }, // 5th column width 
                    { "sWidth": "null" }, // 6th column width
                    { "sWidth": "null" }, // 7th column width 
                    { "sWidth": "10%" }, // 8th column width 
                    { "sWidth": "10%" }, // 9th column width
                    { "sWidth": "40%" }, // 10th column width
                    { "sWidth": "null" } // 11th column width
                    ],
                "bPaginate": true,              
                "sDom": '<"H"TCfr>t<"F"ip>',
                "oTableTools": 
                {
                    "aButtons": [ "copy", "csv", "print", "xls", "pdf" ],
                    "sSwfPath": "copy_cvs_xls_pdf.swf"
                },
                "sPaginationType":"full_numbers",
                "aaSorting":[[0, "desc"]],
                "bJQueryUI":true    

            });
3
Allan Starr

In Javaスクリプトは次のコードを使用して幅を計算します

var scrollX = $(window).width()*58/100;
var oTable = $('#reqAllRequestsTable').dataTable({
    "sScrollX": scrollX
    } );
2
Raje

cssを使用すると、列に幅を簡単に追加できます。

ここで、ヘッダー（thead）の300pxに最初の列幅を追加しています

::ng-deep  table thead tr:last-child th:nth-child(1) {
    width: 300px!important;
}

tbodyの最初の列に同じ幅を追加します

  <table datatable class="display table ">
            <thead>
            <tr>
                <th class="text-left" style="width: 300px!important;">name</th>
            </tr>
            </thead>
            <tbody>
           
            <tr>
                <td class="text-left" style="width: 300px!important;">jhon mathew</td>
                
            </tr>
            </tbody>
        </table>

この方法により、n番目の子の順序を変更することで幅を簡単に変更できます。 3列が必要な場合は、nth-child（3）を追加します

0
Harikrishnan k