How to set column width for DataTables

Tags: javascript,css,datatables,datatables-1.10

Problem :

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?


.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.

Solution :

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.

    CSS Howto..

    Slickgrid - How to add css at grid creation time?

    How do I make a DIV tag stretch to the size of it's children?

    How do you change the appearance of a button in javascript?

    CSS: How to make custom file upload button take full width (button works)

    How to refer to an anchor pane in css?

    How to use commas in a CSS variable fallback?

    When I try to print a page I created using jQuery Mobile, it always prints an extra blank page. How can I stop this?

    HTML/CSS - Input [Text] How to disable the browser from offering suggestings in the Dropdown?

    How to get two divs the same height depending on which one has the bigger height in CSS [duplicate]

    How to inject javascript var into css

    How can I stop my submenu from disappearing while hovering between spaced submenu items?

    how to display labels inline with inputs, using w3.css

    Any idea how to add this sinking hover effect to an image/link?

    how to CSS select all th cells, except the last one on IE7/8?

    how to position an “Insert row” button in front of each horizontal row border of a table?

    How to cut the bottom overflow of page CSS/HTML

    CSS background 100% height - How to do?

    How to make a full width image responsive

    How to use global stylesheet with css loader

    How to scale a .svg being the background in a div?

    How to use CSS Seletor to capture attribute

    How to make input+label in a form appear one by one?

    How do I make my HTML5 nav li tab stay active on click with CSS3?

    How do front end devs bundle and minify files?

    How to fix div position while scrolling? [closed]

    how to connect circles with lines without ovelaping how do they transform everything to RTL

    How to avoid margin form ul in li tag?

    How can I make my webpage background cover fixed for the full size page in css?

    How to indicate that an LI with a link was pressed.