jQuery DataTables 最大列宽

Question

我在 .NET Web 应用程序中使用 jQuery DataTables，但如何设置一个特定列的最大宽度，所有其他列应自动调整大小（就像它们现在在我的表中一样）

编辑

DataTables 自己正确地完成了它，问题是有一个很长的单词没有空格导致了问题

Answer 1

你的问题似乎与 CSS 更相关......

在 CSS 中使用 word-wrap 可以解决这个问题，因为 columnX 只需将其添加到你的 CSS 中即可。

.columnX {
  word-wrap: break-word;
}

根据您为列设置的宽度，它甚至会包装没有空格的单词。

请参阅：https://developer.mozilla.org/en/css/word-wrap

Answer 2

我同意上述使用自动换行的解决方案 - 它效果很好。但是，对于包含大量数据的列，我还遇到了更多问题。我还执行了以下操作以使其完全正常工作：

我在数据表的列宽度方面遇到了许多问题。对我来说，神奇的解决方法是包括这行

table-layout: fixed;

This css comes with the another整体css of the table。例如，如果您已按如下方式声明 datatables：

LoadTable = $('#LoadTable').dataTable.....

那么神奇的 css 行将位于类 Loadtable 中。

#Loadtable {
  margin: 0 auto;
  clear: both;
  width: 100%;
  table-layout: fixed;
}

Answer 3

我通过修改内容（如果太长）并在工具提示中显示全文来控制列宽。

{
    targets: [3],
    "render": function (data, type, row, meta) {
        return type === 'display' && data.length > 20 ?
        '<span title="' + data + '">' + data.substr(0, 18) + '...</span>' : data;
    }
},
{
    targets: [3],
    "render": function (data, type, full, meta) {
        return '<span data-toggle="tooltip" title="' + data + '">' + data + '</span>';
    }
}

使用 span 元素，您也可以直接控制长度。

{
    targets: [3],
    "render": function (data, type, full, meta) {
        return '<span style="display: inline-block; width:200px;">' + data + '</span>';
    }
}

Answer 4

使用此链接可以轻松

'columnDefs': [
      {'max-width': '20%', 'targets': 0}
    ],

获取更多信息。
（如何设置特定列的最大宽度在 jQuery DataTables 中）！