I want to set static width for all DataTables (with scroll plugin) columns.
It makes the columns wider if I set width for all <th>
tags except one. And it doesn't work if the width is set for all tags. Plus, when I inspect via the developer tools, I don't see any <th>
element with width 400px
. The elements have different width: 115px
, 132px
, 145px
...
Why is that? How can I set the exact width for columns?
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 a server side.