html - 如何设置数据表中某些列宽的列宽

这是我的 data table 。

我似乎无法控制任何列的宽度:

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": 'ajax/data/arrays.txt'
    } );

我尝试了各种方法 here:

$('#example').dataTable( {
  "autoWidth": false
} );

和 here :

$('#example').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

没有成功。 谁能告诉我如何手动控制某些列的宽度？ 我希望可以使用数据表中的现有方法来完成。

注意:如果有机会，我会发布一个 fiddle 。
fiddle here - 它不完全相同，但如果我的理解是正确的，我应该可以在这里控制列宽:

var table = $('#example').DataTable();

最佳答案

我的经验是 columns.width 主要适用于相对意图，即“我希望此列相对较大”。每个列的宽度都会受到很多影响，即使您仔细地将每一列定位为精确的百分比加起来为 100，您最终也会感到沮丧。

如果您想要精确、精确的列宽定义，则无法绕过硬编码 CSS:

table.dataTable th:nth-child(1) {
  width: 20px;
  max-width: 20px;
  word-break: break-all;
  white-space: pre-line;
}

table.dataTable td:nth-child(1) {
  width: 20px;
  max-width: 20px;
  word-break: break-all;
  white-space: pre-line;
}

http://jsfiddle.net/6eLg0n9z/

关于html - 如何设置数据表中某些列宽的列宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46781396/