jQuery DataTable列宽设置无效果，尝试多种方法仍未解决

我太懂你这种头疼了——DataTables在列宽适配这块有时候确实会“顽固不化”，哪怕试了autoWidth:false和百分比也没效果。咱们一步步拆解问题，给你几个靠谱的解决方案：

1. 必须明确配置columns的宽度属性 #

你当前的代码里没看到columns数组的配置，这是关键！哪怕开了autoWidth:false，DataTables也需要你明确告诉它每列该占多少宽度。试试给每一列指定width：

var table = $('#table').DataTable({
  "dom": 'Bfrtip',
  "order": [8, "desc"],
  "createdRow": function (row, data, dataIndex) {
    if (data.IsActive === false) {
      $(row).addClass('inactive');
    }
  },
  "serverSide": true,
  "processing": true,
  "paging": true,
  "bLengthChange": false,
  "iDisplayLength": 200,
  "autoWidth": false, // 这个保留，关闭自动列宽计算
  "columns": [
    { "width": "8%" },   // 第1列宽度
    { "width": "12%" },  // 第2列宽度
    // ... 按顺序给所有列设置宽度，总数尽量接近100%
    { "width": "15%" }   // 第9列（对应order里的索引8）
  ],
  "ajax": {
    "url": "/Inventory/Get",
    "type": "POST",
    "dataType": "json"
  }
});

2. 排查CSS样式冲突 #

DataTables自带的表格样式可能和你的全局CSS、自定义样式冲突，导致列宽被覆盖。可以试试用CSS强制指定列宽（先用来测试，确认问题后再优化）：

/* 全局指定表格列宽 */
#table th, #table td {
  box-sizing: border-box; /* 确保 padding 不影响宽度计算 */
}

/* 给特定列设置宽度，比如第9列 */
#table th:nth-child(9), #table td:nth-child(9) {
  width: 15% !important;
}

3. 服务器端渲染的补充处理 #

因为你用了serverSide:true，表格内容是动态加载的，初始设置的列宽可能被动态生成的内容冲掉。可以在initComplete回调里再次强制设置：

"initComplete": function(settings, json) {
  // 初始化完成后，给第9列设置宽度
  this.api().columns(8).header().style.width = '15%';
}

4. 检查是否有插件干扰 #

如果你同时用了Responsive、FixedColumns这类DataTables扩展插件，它们可能会自动调整列宽来适配功能。可以暂时禁用这些插件，看列宽是否恢复正常，再针对性调整插件配置。

内容的提问来源于stack exchange，提问作者Donald Jansen