Headers not in sync with tbody on x scroll in IE8

sen

Hi,

I am using jQuery data tables in most of my application screens in my project.
We use IE 8.0, Firefox & Google Chrome browsers to test the screens.

I disable the pagination & I use

$('#myGrid').dataTable( {
"bPaginate": false,
"bScrollCollapse": true,
"sScrollX": "100%",
"sScrollY": "300",
"sScrollXInner": "101%"
)};


so that I require a horizontal scroll when the table has more columns to be shown in the view port & y scroll if there are more records than 300px.
The data for the table comes through an Ajax call & the columns count changes dynamically

The screens are working fine in Firefox & Chrome.

But in IE 8.0, if there are more columns, when I drag the x-scroll bar to view the columns, the headers are not moved identically (inline) with the columns. The headers gets a shift on dragging.

Can you help me in resolving this issue.

-Sen