Как установить ширину столбца для DataTables

Question

Я хочу установить статическую ширину для всех столбцов DataTables (со списком прокрутки).

Это делает колонки более широкими, если я установил ширину для всех <th> тегов, кроме одного. И это не работает, если ширина установлена ​​для всех тегов. Кроме того, когда я проверяю инструменты разработчика, я не вижу никакого элемента <th> с шириной 400px. Элементы имеют разную ширину: 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 для ширины необходимо переопределить любые встроенные стили применяются с помощью DataTables, и, возможно, другие стили применяются с помощью jsfiddle или любой другой. table-layout:fixed; сделает рендеринг таблицы приоритетом ширины ячеек в первой строке для определения ширины всех ячеек в каждом столбце.

В скрипке есть все на 410 вместо 400, из-за прокладки.

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

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