如何爲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