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

Question

我有一个 DataTables table，我希望它自动调整为默认大小（调整 window 大小时并根据初始内容等），除了一个特殊的列，我会喜欢固定宽度。

看来，如果我使用 columnDefs 设置宽度，table 最初会根据内容自动调整大小，但它不再适应更改后的 window 宽度。指定百分比宽度或像素宽度似乎无关紧要。

Answer 1

如果您想精确控制 table 列宽，您必须使用 CSS:

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

如果您检查上面的列，您会看到 computed width 大于 200px。这是开始的填充，所以你必须重置 padding-left 和 padding-right 才能得到恰好 200px。

如果您想将列的宽度缩小到超过 "reasonable"，您必须添加一些额外的 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/

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

jQuery DataTables fixed size for ONE of the columns?

datatables-1.10