Question

我一直试图用Jquery DataTables抓住我的头，并试图用内联css修复列标题的宽度。但是每当页面加载时，数据表会自动调整宽度并为标题提供相等的宽度。我尝试过可配置的数据表选项。

autoWidth:false
column.adjust()

以及我在谷歌上可以找到的任何内容。但仍然没有运气。有没有办法给标题赋予宽度覆盖DataTables的默认自动调整。以下是我的选择：

$('#example3').DataTable( {
    scrollY: '450px',
    scrollX: true,
    scrollCollapse: true,
    'ordering': false,
    paging: false,
    autoWidth: false
  });

Answer 1

您也可以像这样给出宽度

<table class="nowrap table table-hover">
    <thead>
        <tr>
            <th width="50%">ID</th>
            <th width="50%">Created</th>
        </tr>
    </thead>
</table>

但请确保您需要将所有th除以100，其中100％宽度

或使用数据表使用

将第一列的宽度设置为20％

$('#example').dataTable( {
  "columns": [
    { "width": "20%" },
    null,
    null,
    null,
    null
  ]
} );

有关详细信息，请访问： - columns width

希望这有帮助！

Answer 2

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

这是在jquery datatable中为特定列设置列宽的语法。

这里target属性是列的索引值，即第一列有0第二列ha 1，就像那样。

有关jQuery数据表documentation

的更多信息

Answer 3

您也可以这样设置宽度

columns: [        
    { "width": "50px", title: "Date" },
    { "width": "120px", title: "Client" },  
    { "width": "120px", title: "Project" },
],

内联列宽度不适用于DataTables

3 个答案: