DataTableの列幅を設定する方法

Question

すべてのDataTables（スクロールプラグイン付き）列に対して静的な幅を設定したいとします。

<th>タグの幅を1つに設定すると、幅が広くなります。また、幅がすべてのタグに設定されている場合は機能しません。さらに、デベロッパーツールを調べると、幅が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はのDataTableによって適用される任意のインラインスタイルをオーバーライドする必要があり、場合によっては他のスタイルはjsfiddleまたは何によって適用されます。 table-layout:fixed;テーブルレンダラーは、各列のすべてのセルの幅を決定するために、最初の行のセルの幅に優先順位を付けます。

フィドルは、パディングのために400の代わりに410ですべてを持っています。

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

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