修复了启用 scrollX 时数据表上的列宽答案

【问题标题】：Fixed column width on Datatables when scrollX is enabled修复了启用 scrollX 时数据表上的列宽
【发布时间】：2020-09-21 11:16:42
【问题描述】：

我有一个动态填充的数据表，其中包含固定列并启用了 scrollX：

$('#products').DataTable({
        "data": formattedData,
        "scrollX": true, 
        "fixedColumns":{ "leftColumns": 0, "rightColumns": 1 }
});

问题是，我需要列停止自动计算它们的宽度。即使我尝试强制它们进行初始化...

$('#products').DataTable({
  "order": [[ 0, "asc" ]],
  "columnDefs": [ 
    { "title": "Name", "targets": 0, "width": "350px" },
    { "title": "Code", "targets": 1 },
    { "title": "Regular code", "targets": 2, "width": "500px" },
    { "title": "Special code", "targets": 3, "width": "300px" }
  ]
});

...如果启用了scrollX，则仅当列太小时才启用滚动。而且我希望滚动始终启用，并且列不改变它们的宽度。

关于如何强制列宽的任何想法？

这里问了同样的问题，但没有答案：https://datatables.net/forums/discussion/31403/scrollx-not-work-with-fixed-column-width

【问题讨论】：

标签： datatables

【解决方案1】：

首先禁用autoWidth -> https://datatables.net/reference/option/autoWidth

以我的拙见，columns.width 除了相对百分比之外，对任何事情都毫无用处。改为在 CSS 中定义最小列宽

#products td:nth-child(1) { min-width: 350px; }
#products td:nth-child(3) { min-width: 500px; }
#products td:nth-child(4) { min-width: 300px; }

http://jsfiddle.net/f8uw6rLy/

【讨论】：