trex trex - 11 months ago 60
CSS Question

How to set column width for DataTables

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

It makes the columns wider if I set width for all

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
element with width
. The elements have different width:

Why is that? How can I set the exact width for columns?


.big-col {
width: 400px;


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

$(document).ready(function() {

Full example:

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.

Answer Source
width:400px !important;


The !important for the width is necessary to override any inline styles being applied by datatables, and possibly other styles being applied by jsfiddle or whatever. The table-layout:fixed; will make the table renderer prioritize the width of the cells in the first row for deciding the width of all cells in each column.

The fiddle has everything at 410 instead of 400, due to padding.