Fixed header columns are not aligned with the table columns in IE8

Fixed header columns are not aligned with the table columns in IE8

robotyroboty Posts: 3Questions: 0Answers: 0
edited August 2013 in FixedHeader
I have a very big table (with 40+ columns) and Fixed header does not seem to calculate the correct width for the columns. The total width is correct, but some columns are either to big or to small.

oTablecasesGrid = $('#MainContent_CaseBlockTable_casesGrid').dataTable({
"sDom": 'RC<"clear">lfrtip',

"iDisplayLength": 100000,
"bLengthChange": false,
"aLengthMenu": [ 100000, 50, 100, 250 ],

"bFilter": true, /* does not seem to make a difference */
"bSort": true,
"bSortCellsTop": true,

"bPaginate": false,
"sPaginationType": "full_numbers",

"bInfo": false,

"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
try {
localStorage.setItem( 'DataTables_casesGrid'+document.URL, JSON.stringify(oData) );
} catch(err) {
"fnStateLoad": function (oSettings) {
try {
var data = localStorage.getItem('DataTables_casesGrid'+document.URL);
return $.parseJSON(data);
catch(err) {
return null;

"bProcessing": true,
"bServerSide": false,

"bAutoWidth": false,
"aoColumns": [{"bSortable":false,"bVisible":true,"sName":"ItemId_0"} /* and so on until column 46... */],
"oColVis": {
"buttonText": "Show / hide columns",
//"bRestore": true,
"sAlign": "left"
oFixHeadercasesGrid = new FixedHeader(oTablecasesGrid, { "zTop": "1" });


I also tried calling


they do work, in the sense that they update the total size of the table, but the individual size of some columns is still off.

I am using the latest version of datatables, and I have tried the nightly version of FixedHeader, but it doesn't seem to help. This behavior is only observable in IE (8 and 10), but not in Firefox.

my table style looks like this:
and the removing the border fixes the problem, but is there a way for me to fix this while keeping the borders ?


  • robotyroboty Posts: 3Questions: 0Answers: 0
    I can provide a test version as an email attachment, I was unable to make it work with JsBin.
  • robotyroboty Posts: 3Questions: 0Answers: 0
    edited September 2013
    I have managed to create a small demo that showcases the problem in IE8.
    the funny part is that it works fine when I use [quote]demo_table.css[/quote] instead of [quote]jquery.dataTables.css[/quote]

    Bug (with jquery.dataTables.css):
    Works fine (with demo_table.css):

    Note: To see the bug, you need to scroll horizontally to the middle of the table.

    Edit: After some more testing I think it has something to do with the [code]style="white-space:nowrap;"[/code] that is set on some of the cells.

    Edit2: The nightly version of FixedHeader seems to work fine in IE8, but the nightly version fails to do an update. The fnUpdate() function seems to be broken.

    Any suggestions?
This discussion has been closed.