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?

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.



Solution :

th.big-col{
width:400px !important;
}

table#example{
table-layout:fixed;
}

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.

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

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


    CSS Howto..

    How can I delay the speed of hover purely via CSS3 for a div?

    How to use imported css styles in GWT correctly

    How do I scale an SVG background-image without honoring aspect ratio in Firefox?

    How to set a child's element 50px narrower to its parent element in css? [closed]

    How to create donut chart in pure css & svg

    CSS Position Help (horizontal sidebar showing up when animate content over)

    how to DRY up (remove redundancy) from this css class selector declaration?

    How to avoid bloating pages with divs?

    How I can add highlight effect on outside the area of selection with CSS?

    How to assign inner shadow to inputs in CSS

    How does CSS computation for background percentages work?

    How can I prevent a responsive nav menu (powered by a CSS3 transition) from animating when different media queries take effect?

    ML - CSS How to align correctly a 'required' asterisk before la form label with the label text?

    How to hardware accelerate a box-shadow animation in CSS?

    How can I turn a background visibility on and off with jQuery?

    How to dynamically resize HTML element according to it's sibling size using CSS only?

    How to make groups of divs the same width using only CSS?

    HTML divs, how to wrap content?

    How do I use css to make a row of boxes that do not wrap when browser shrinks?

    How to compile sass / scss without creating map files

    sunken border when background-color css specified - how to avoid?

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    How to add container without destroying table

    How to get Angular Material Design's directive to scale to image properly in IE?

    CSS: How would I select a specific Text and hide it

    How to create image curved using css or jquery (See picture)

    How to create that background on my page with css [duplicate]

    How to draw heart using HTML/CSS table?

    How can i prevent divs from moving while resizing the page

    How to get 2 CSS files to work together? - Problem with !important overriding rules