How to make chrome respect tables with fixed column width

Question

I have a basic home made "table" plug in that supports scrolling horizontally and vertically where the column widths are to be fixed while rendering. So we use the CSS

table-layout:fixed;

but the problem is that Chrome seems to think that even though the table width is calculated and the column widths are calculated, it should still reformat the table.

Fiddle here: http://jsfiddle.net/paull3876/Ssr33/

If you run this in IE or Firefox its ok, the data and column headers are correctly truncated, but in Chrome, it wants to show all the data, so it ignores overflow:hidden and set widths and the result is that the columns do not line up between the header and body tables.

So, any ideas on how to make this work in chrome would be much appreciated.. thank you

Answer 1

Aha I think I have it.

If I set the TD to be display:inline-block

.datatable .scrollingdiv td, .datatable .nonscrollingdiv td {
    overflow:hidden;
    display:inline-block;
}

that seems to do it.

Answer 2

im still trying to make chrome truncate, but if you dont mind row height you could wrap the text using this workaround:

$("td",$(".datatable")).css({"white-space":"normal"});