Jak ustawić szerokość kolumn dla DataTables

Question

Chcę ustawić stałą szerokość dla wszystkich kolumn DataTables (z wtyczką przewijania).

Powoduje, że kolumny są szersze, jeśli ustawię szerokość wszystkich tagów <th> z wyjątkiem jednego. I nie działa, jeśli szerokość jest ustawiona dla wszystkich tagów. Ponadto, gdy sprawdzam za pomocą narzędzi programistycznych, nie widzę żadnego elementu <th> o szerokości 400px. Elementy mają inną szerokość: 115px, 132px, 145px ...

Dlaczego tak jest? Jak ustawić dokładną szerokość kolumn?

CSS

.big-col { 
    width: 400px; 
} 

JS

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

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

Pełny przykład: http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/

Również próbowałem opcję columnDefs, bez powodzenia.

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

Dokładna liczba kolumn jest nieznana. Tabela HTML jest budowana dynamicznie na podstawie danych ze strony serwera.

Answer 1

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

table#example{ 
table-layout:fixed; 
} 

!important dla szerokości należy zastąpić wszelkie style inline stosowane przez DataTables i ewentualnie inne style stosowane przez jsfiddle czy cokolwiek innego. Model table-layout:fixed; spowoduje, że renderer tabeli będzie określał szerokość komórek w pierwszym rzędzie, decydując o szerokości wszystkich komórek w każdej kolumnie.

Fiddle ma wszystko w 410 zamiast 400, ze względu na padding.

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

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