JQuery Datatables - Empty table column headers are squished

Question

I have a page with two dataTables. One of them is populated with data on page load, the other is empty (but skeletal, i.e. it has headers and empty <tbody> tag). The second table depends on the selection of a row in the first table. Everything is working, and both tables are loading and displaying data like they should, with the exception of when the second table is empty.

When it is empty, the headers appear thusly:

enter image description here

Those headers have sWidth set for each, and when there is data to be displayed, they are the correct width and all is right with the world. I have, as yet, been unable to get them to behave with no data in the table.

Any assistance would be most appreciated.

Edit

I have tried bAutoWidth on and off (removing and adding explicit column widths in the aoColumns property.

I have also tried giving the <th> element an explicit width <th width="50px"> and tried setting a class on the <th> with an explicit width. Additionally I tried wrapping the text in the th in a <span> and setting a width and then a style with a width. Nothing has worked. In fact, the <span> made it even worse, by collapsing the header row almost to 0.

Also, table-layout:fixed is set.

DataTables has an init option: bAutoWidth....setting that to false will likely be at least part of the answer to fixing this problem — BLSully
– BLSully, Commented Oct 19, 2012 at 19:39
It looks like calling fnAdjustColumnSizing() will do it, but is that really the way this is done? Seems like it should initialize it and size columns at initialize time, without requiring a separate function call. — CodeWarrior
– CodeWarrior, Commented Oct 19, 2012 at 20:10

Luca Fagioli · Accepted Answer · 2012-10-19 19:37:22Z

1

Shooting in the dark. Have you tried:

table {
    table-layout: fixed;
}

?

answered Oct 19, 2012 at 19:37

Luca Fagioli

13.5k5 gold badges64 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Datatables - Empty table column headers are squished

Edit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related