jQuery DataTables最大列宽

Question

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

编辑

DataTables自己已经正确地完成了这个问题，问题是有一个没有空格的非常长的单词导致了问题。

- Mats Hofman

---

是的，但我已经找出问题所在了，我的测试字符串没有任何空格。 - Mats Hofman

Answer 1

您的问题似乎与CSS有关...

在CSS中使用word-wrap可以解决这个问题，对于columnX，只需将以下内容添加到您的CSS中。

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

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

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

- Justin Jenkins

Answer 2

我赞同使用自动换行的上述解决方案 - 它运作得很好。然而，我在包含大量数据的列上仍然存在问题。为了完全解决此问题，我还做了以下操作：

我曾经遇到过许多与数据表列宽度有关的问题。对我来说神奇的解决方法是包括以下行：

table-layout: fixed;

这个 css 与整个表格的 css 相关联。例如，如果您像以下这样声明了 datatables:

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

那么神奇的 css 代码行应该放在类 Loadtable 中。

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

- user1842675

---

+1 感谢。Justin 和你们已经为我节省了很多时间 :-) - webcoder

将此与被接受的答案结合使用可以发挥作用，仅依靠被接受的答案则不行。 - user4278778

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>';
    }
}

- Spencer Sullivan

Answer 4

通过使用，这可以变得很容易

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

请参考此链接获取更多信息。 (如何在jQuery DataTables中为特定列设置最大宽度)！

- Milan Raj

---

引用链接指出，设置'max-width'无效。 - Peter