Fixed header columns are not aligned with the table columns in IE8
Fixed header columns are not aligned with the table columns in IE8
roboty
Posts: 3Questions: 0Answers: 0
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.
[code]
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" });
[/code]
I also tried calling
oTable.fnAdjustColumnSizing(false);
oFixHeader.fnUpdate();
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:
[code][/code]
and the removing the border fixes the problem, but is there a way for me to fix this while keeping the borders ?
[code]
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" });
[/code]
I also tried calling
oTable.fnAdjustColumnSizing(false);
oFixHeader.fnUpdate();
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:
[code][/code]
and the removing the border fixes the problem, but is there a way for me to fix this while keeping the borders ?
This discussion has been closed.
Replies
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): http://live.datatables.net/ovoyoc/18
Works fine (with demo_table.css): http://live.datatables.net/ovoyoc/16
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?