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

Question

这是我的 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();

Answer 1

我的经验是columns.width moSTLy 适用于相对意图，即“我希望此列相对较大”。每个列宽可能会造成很多影响，即使您仔细地将每个列的精确百分比加起来达到 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/