在jQuery Datatables中指定固定的列宽

Question

我正在尝试为jQuery数据表中的几列指定固定宽度.我试图通过datatables文档中指定的列定义来完成此任务,但列和列标题仍然是自动调整大小的.

这是我一直在使用的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>

当我检查实时代码时,我可以看到我在列定义中指定的宽度作为样式属性添加到列中,但它与列的实际宽度不匹配.

Answer 1

这不是DataTables问题.了解如何确定列宽.基于此算法,我看到以下两种解决方案.

解决方案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/.

Answer 2

这是一个代码示例(修复了4列表的列宽):

1. set autoWidth:false;
2. 将px值设置为前3列;
3. 重要的是:检查表格宽度是否超​​过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 };

因此,您将看到宽度为300px的前3列,最后一列将是灵活的,大约150px(需要额外调整).

最后但并非最不重要的是:当单元格包含太长(> 300px不带空格)字时,固定列大小300px不会阻止您.因此,您必须记住,所有单词必须小于列的固定侧.