如何为DataTable设置列宽

Question

我想为所有DataTables（带滚动插件）列设置静态宽度。

如果我为所有<th>标签设置宽度（除了一个以外），它会使列更宽。如果为所有标签设置宽度，则不起作用。此外，当我通过开发人员工具检查时，我看不到任何宽度为400px的<th>元素。元素有不同的宽度：115px,132px,145px ...

这是为什么？我如何设置列的确切宽度？

CSS

.big-col { 
    width: 400px; 
} 

JS

var options = { 
    "sScrollX": "100%", 
    "sScrollXInner": "110%", 
    "bScrollCollapse": true, 
    "colReorder": true 
}; 

$(document).ready(function() { 
    $('#example').dataTable(options); 
}); 

完整的示例：http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/

而且，我试过columnDefs选项，但没有成功。

var options = { 
    "columnDefs": [ 
     { "width": "100px", "targets": "_all" } 
    ] 
}; 

确切的列数是未知的。 HTML表格是基于来自服务器端的数据动态构建的。

Answer 1

th.big-col{ 
width:400px !important; 
} 

table#example{ 
table-layout:fixed; 
} 

的!important的宽度是必要的覆盖由数据表应用任何内嵌样式，以及可能的其他样式被的jsfiddle或任何应用。 table-layout:fixed;将使表格渲染器优先考虑第一行中单元格的宽度，以确定每列中所有单元格的宽度。

由于填充，小提琴拥有410而不是400的一切。

http://fiddle.jshell.net/o1hoabep/9/

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout