jQuery DataTables 固定其中一列的大小？

Question

我有一个 DataTables 表，我希望它默认自动调整大小（在调整窗口大小时和根据初始内容等），除了一个特殊的列，我希望它有一个固定的宽度。

看来，如果我使用columnDefs 设置宽度，表格最初会根据内容自动调整大小，但它不再适应更改的窗口宽度。如果我指定百分比宽度或像素宽度似乎并不重要。

Answer 1

如果您想精确控制表格列宽，您必须使用 CSS：

table.dataTable thead th:nth-child(4),
table.dataTable tbody td:nth-child(4) {
  width: 200px;
  max-width: 200px;
  min-width: 200px;
}  

如果您检查上面的列，您将看到 计算 width 大于 200px。这是开始的内边距，因此您必须重置 padding-left 和 padding-right 才能获得准确的 200 像素。

如果你想将一列缩小到超出“合理”的宽度，你必须添加一些额外的 CSS：

table.dataTable {
  table-layout: fixed;
}

为什么需要这个你可以在这里阅读 -> https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values

table.dataTable thead th:nth-child(2),
table.dataTable tbody td:nth-child(2) {
  word-break: break-all;
  overflow-wrap: break-word;
  width: 20px;
  max-width: 20px;
  padding-right: 0px;
  padding-left: 0px;
}

演示 -> http://jsfiddle.net/n4j1wgu5/