Question

我试图为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>

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

Answer 1

这不是DataTables问题。见how column widths are determined。基于此算法，我看到以下两种解决方案。

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

Here is a code sample (fixed the column width for 4 column table)：

set autoWidth：false;
将px值设置为前3列;
重要：检查表格宽度是否超过3列+最后一列;

调整表格宽度和第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 };

结果您将看到前3列，宽度为300px，最后一列将灵活，大约150px（需要额外调整）。

最后但并非最不重要：固定列大小300px不会阻止您在单元格包含太长（> 300px不带空格）字的情况下。因此，您必须记住，所有单词必须小于列的固定边。

Answer 3

为function ThemeName_preprocess_node(&$variables) { $variables['<div class="info">']= str_replace( array('A','B','C','D','E','F'), array('1','2','3','4','5','6'), $variables['<div class="info">'] ); }标记或其<table>添加以下样式：

css class or css id

Answer 4

设置固定的列宽可能会很麻烦。以下解决方案效果很好。

{ width: 250, targets: 1, class: "someClass",
    render : function ( data, type, row ) {
        if ( type === 'display' ) {
            return `<div style="width:250px"> ${data} </div>`;
        }
        return data;
    }
}

在jQuery Datatables中指定固定的列宽

4 个答案: