Question

我尝试将DataTables列的列宽设置为较小的值（如10px）。

根据the docs，我应该可以使用：

$('#mytable').dataTable( {
    "columnDefs": [
      { "width": "10px", "targets": 0 }
    ]
} );

这似乎适用于较大的值（如100px），但不适用于我尝试使用的较小值。

我的列标题和该列中的单元格只包含 ，因此这些不应该定义宽度。我从标题中删除了排序可能性，这样就不会占用空间（"orderable": false）。

Jsfiddle：https://jsfiddle.net/snoodaard/ak11heu4/

我还尝试使用<th width="5px"> </th>显式设置宽度。

有关如何完成此任务的任何指示？

Answer 1

<强>解

使用以下代码删除最后一列的填充和内容，并为特定颜色的所有单元格着色。

<强>的JavaScript

$('#mytable').dataTable({
    "order": [],
    "paging": false,
    "dom": 'T<"clear">lfrtip',
    "columnDefs": [{
        "className": "tag",
        "orderable": false,
        "width": "2px",
        "targets": 2
    }]
});

<强> CSS

table.dataTable thead tr th.tag,
table.dataTable tbody tr td.tag {
    padding:0;
    text-indent:-9999px;
}

table.dataTable tbody tr td.tag,
table.dataTable tbody tr td.tag {
    background-color:red;
}

您可以使用createdRow回调根据行数据为行设置类。然后，您将能够根据该数据对每一行进行不同的着色。

<强>样本

请参阅updated jsFiddle以获取代码和演示。

DataTables列宽：小值无效

1 个答案: