web-dev-qa-db-ja.com

jQuery Datatablesで固定列幅を指定する

JQueryデータテーブルのいくつかの列に固定幅を指定しようとしています。 datatables documentation で指定されている列定義を介してこれを達成しようとしましたが、列と列ヘッダーはまだ自動サイズ設定されます。

これが私が取り組んできたjsFiddleです： jsFiddle

JavaScript：

var table = $('#example2').DataTable({
        "tabIndex": 8,
        "dom": '<"fcstTableWrapper"t>lp',
        "bFilter": false,
        "bAutoWidth": false,
        "data": [],
        "columnDefs": [
            {
                "class": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": '',
                "targets": 0
            },
            { 
                "targets": 1},
            { 
                "targets": 2,
                "width": "60px"},
            { 
                "targets": 3,
                "width": "1100px"},
            { 
                "targets": 4},
            { 
                "targets": "dlySlsFcstDay"},
            { 
                "targets": "dlySlsFcstWkTtl",
                "width": "60px"}
        ],
        "order": [
            [1, 'asc']
        ]
    });

HTML：

<div class="forecastTableDiv">
            <table id="example2" class="display" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th colspan="5"></th>
                    <th  class="slsFiscalWk" colspan="8">201424</th>
                    <th  class="slsFiscalWk" colspan="8">201425</th>
                    <th  class="slsFiscalWk" colspan="8">201426</th>
                    <th  class="slsFiscalWk" colspan="8">201427</th>
                </tr>
                <tr>
                    <!--<th></th>-->
                    <!--<th>Vendor</th>-->
                    <!--<th>Origin ID</th>-->
                    <!--<th>Destination</th>-->
                    <!--<th>Vendor Part Nbr</th>-->
                    <!--<th>SKU</th>-->
                    <!--<th>Mon</th>-->
                    <!--<th>Tue</th>-->
                    <!--<th>Wed</th>-->
                    <!--<th>Thu</th>-->
                    <!--<th>Fri</th>-->
                    <!--<th>Week Ttl</th>-->

                    <th></th>
                    <th>Vendor</th>
                    <th>Origin ID</th>
                    <th style="width: 200px">Vendor Part Nbr</th>
                    <th>SKU</th>
                    <!-- First week -->
                    <th class="dlySlsFcstDay" >Mon</th>
                    <th class="dlySlsFcstDay" >Tue</th>
                    <th class="dlySlsFcstDay" >Wed</th>
                    <th class="dlySlsFcstDay" >Thu</th>
                    <th class="dlySlsFcstDay" >Fri</th>
                    <th class="dlySlsFcstDay" >Sat</th>
                    <th class="dlySlsFcstDay" >Sun</th>
                    <th class="dlySlsFcstWkTtl" >Week Ttl</th>
                    <!-- Second week -->
                    <th class="dlySlsFcstDay" >Mon</th>
                    <th class="dlySlsFcstDay" >Tue</th>
                    <th class="dlySlsFcstDay" >Wed</th>
                    <th class="dlySlsFcstDay" >Thu</th>
                    <th class="dlySlsFcstDay" >Fri</th>
                    <th class="dlySlsFcstDay" >Sat</th>
                    <th class="dlySlsFcstDay" >Sun</th>
                    <th class="dlySlsFcstWkTtl" >Week Ttl</th>
                    <!-- Third week -->
                    <th class="dlySlsFcstDay" >Mon</th>
                    <th class="dlySlsFcstDay" >Tue</th>
                    <th class="dlySlsFcstDay" >Wed</th>
                    <th class="dlySlsFcstDay" >Thu</th>
                    <th class="dlySlsFcstDay" >Fri</th>
                    <th class="dlySlsFcstDay" >Sat</th>
                    <th class="dlySlsFcstDay" >Sun</th>
                    <th class="dlySlsFcstWkTtl" >Week Ttl</th>
                    <!-- Fourth and final week -->
                    <th class="dlySlsFcstDay" >Mon</th>
                    <th class="dlySlsFcstDay" >Tue</th>
                    <th class="dlySlsFcstDay" >Wed</th>
                    <th class="dlySlsFcstDay" >Thu</th>
                    <th class="dlySlsFcstDay" >Fri</th>
                    <th class="dlySlsFcstDay" >Sat</th>
                    <th class="dlySlsFcstDay" >Sun</th>
                    <th class="dlySlsFcstWkTtl" >Week Ttl</th>
                </tr>
                </thead>

                <tfoot>
            </table>
        </div>

ライブコードを調べると、列定義で指定している幅がスタイル属性として列に追加されていることがわかりますが、列の実際の幅と一致していません。

datatableshtml-tablejquery-datatablescss-tables
11
Hunter Hodnett

これはDataTablesの問題ではありません。 列幅の決定方法 を参照してください。このアルゴリズムに基づいて、次の2つの解決策があります。

ソリューション1

自分でテーブルの幅を計算し、それに応じて設定します。

#example {
  width: 3562px;
}

こちらのライブ例をご覧ください： http://jsfiddle.net/cdog/jsf6cg6L/ 。

ソリューション2

各セルの最小コンテンツ幅（MCW）を設定し、ユーザーエージェントに列幅を決定させます。

これを行うには、ターゲット列にクラスを追加して、スタイルを設定できるようにします。

var table = $('#example').DataTable({
  tabIndex: 8,
  dom: '<"fcstTableWrapper"t>lp',
  bFilter: false,
  bAutoWidth: false,
  data: [],
  columnDefs: [{
    class: 'details-control',
    orderable: false,
    data: null,
    defaultContent: '',
    targets: 0
  }, {
    targets: 1
  }, {
    class: 'col-2',
    targets: 2
  }, {
    class: 'col-3',
    targets: 3
  }, {
    targets: 4
  }, {
    targets: 'dlySlsFcstDay'
  }, {
    targets: 'dlySlsFcstWkTtl'
  }],
  order: [[1, 'asc']]
});

次に、各クラスの最小幅プロパティの目的の値を設定します。

.col-2,
.dlySlsFcstWkTtl {
  min-width: 60px;
}

.col-3 {
  min-width: 1100px;
}

こちらのライブ例をご覧ください： http://jsfiddle.net/cdog/hag7Lpm5/ 。

14
cdog

コードサンプルは次のとおりです（ 4列テーブルの列幅を修正） ：

  1. autoWidthを設定：false;
  2. px値を最初の3列に設定します。
  3. important：テーブルの幅が3列+最後の列より少し大きいかどうかを確認します。

  4. テーブルの幅と4列目を調整します。

    $('#example').DataTable({ //four column table
   autoWidth: false, //step 1
   columnDefs: [
      { width: '300px', targets: 0 }, //step 2, column 1 out of 4
      { width: '300px', targets: 1 }, //step 2, column 2 out of 4
      { width: '300px', targets: 2 }  //step 2, column 3 out of 4
   ]
});

テーブル幅を設定、4 * 300px：

     #example { width: 1200px };

その結果、幅300ピクセルの最初の3列が表示され、最後の列は柔軟で約150ピクセルになります（追加の調整が必要です）。

最後だが大事なこと：固定列サイズ300pxは、セルに含まれるWordが長すぎる（スペースなしの> 300px）Wordの場合を防ぎません。したがって、すべての単語は列の固定側よりも小さくなければならないことに留意する必要があります。

5
Anton Lyhin

のために <table>タグまたはそのcss class or css id次のスタイルを追加します。

`table{
     margin: 0 auto;
     width: 100%;
     clear: both;
     border-collapse: collapse;
     table-layout: fixed;
     Word-wrap:break-Word;
}`
2
the_D