无法修复数据表列的宽度答案

【问题标题】：Not able to fix width of datatable columns无法修复数据表列的宽度
【发布时间】：2016-01-14 05:12:24
【问题描述】：

我们在应用程序中使用数据表。有人可以建议如何在数据表中设置列的宽度。

这是基本配置：

WATable =   $('#dtAssignment').dataTable({
            "sScrollY": "150px",
            "bAutoWidth": false,
            "bPaginate": true,
            "sPaginationType": "two_button",
            "bLengthChange": true,
            "iDisplayLength": DefaultRecordsPerPage,
            "aLengthMenu": [[100, 250, 500], [100, 250, 500]],
            "sDom": 'Trti<"row"<"two columns" l><"seven-by-five columns"<"#dvGoto">><"offset-by-seven" p>>',
            "aoColumns": dtAssignmentData.template,
            "aoColumnDefs": dtAssignmentData.columnDefs,
             "fnDrawCallback": function(oSettings) {

我们正在从 ASP.NET MVC 应用程序获取 aoColumns 和 aoColumnDefs 数据。以下是来自服务器的示例 JSON 数据。

{"columnDefs":[{"sTitle":"Description","aTargets":"[0]","sWidth":"220px","sName":null,"sType":null},{"sTitle":"User ID","aTargets":"[1]","sWidth":"50px","sName":null,"sType":null},{"sTitle":"Date Added","aTargets":"[2]","sWidth":"80px","sName":null,"sType":null}],"template":[{"mDataProp":"Description","fnRender":null,"sClass":null,"mRender":null,"sWidth":null},{"mDataProp":"CreatedBy","fnRender":null,"sClass":null,"mRender":null,"sWidth":null},{"mDataProp":"CreationDate","fnRender":null,"sClass":null,"mRender":null,"sWidth":null}],"aaData":[{ ... BLAH..BLAH..BLAH

即使在设置 "bAutoWidth": false 并为每列设置 sWidth 之后，数据表也会自动调整列大小。

【问题讨论】：

标签： jquery datatables

【解决方案1】：

您需要调整要发送的数据。同时设置aoColumns 和aoColumnDefs 是没有意义的。仅当您要发送所有列的信息时才使用aoColumns。
您在一个选项中设置了"sWidth":null，而在另一个选项中设置了"sWidth":"220px"，这令人困惑。
避免使用已弃用的fnRender 选项，建议改用mRender 选项。
添加以下 CSS 规则以避免表格使用 100% 的页面宽度。
```
table.dataTable {
  width:auto;
}
```

有关代码和演示，请参阅this jsFiddle。

【讨论】：