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:

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.

Answer 1

Shooting in the dark. Have you tried:

table {
    table-layout: fixed;
}

?