How to set column width for data tables

Question

I want to set a static width for all columns of a DataTables (with a scroll plugin).

This makes the columns wider if I set the width for all <th> tags except one. And this does not work if the width is set for all tags. In addition, when I check the developer tools, I do not see the <th> element with a width of 400px . Elements have different widths: 115px , 132px , 145px ...

Why? How to set exact column width?

CSS

 .big-col { width: 400px; } 

Js

 var options = { "sScrollX": "100%", "sScrollXInner": "110%", "bScrollCollapse": true, "colReorder": true }; $(document).ready(function() { $('#example').dataTable(options); }); 

Full example: http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/

Also, I tried the columnDefs option without success.

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

The exact number of columns is unknown. The HTML table is built dynamically based on data from the server side.

Answer 1

 th.big-col{ width:400px !important; } table#example{ table-layout:fixed; } 

!important for width, you need to override any inline styles applied with datatables, and possibly other styles applied by jsfiddle or something else. table-layout:fixed; will render the table a priority of the width of the cells in the first row to determine the width of all cells in each column.

The script has everything at 410 instead of 400, due to indentation.

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

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