Header and Footer not aligning to Body with sScrollX enabled

GavinvanGent

Hi All, Hi Allan,

I'm currently having an issue with sScrollX and column alignment (possibly caused by multiple tables, but have not verified that yet).

The website i'm busy designing is going to be used by a few clients and will be integrated into their sites using an iframe. (Don't ask me why an iframe, but thats what i've got to work with.) This means that all the functionality of my site will be found on one html page. This page will have multiple tabs (using jquery-ui stuffs) for the various different sections. That's all well and completely unrelated to the topic; the essence being that I am working with multiple tables as I have to load all my tables on the "same" page.

I have one setting that i use for all these tables (as multiple tables share the setting, and don't have a setting per table). These settings are as such:

[code]

{

"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bInfo": true,
"bAutoWidth": true,
"bDestroy": true,
"bRetrieve": false,
"bJQueryUI": true,
"bProcessing": true,

"sScrollX": "100%",
"bScrollCollapse": true,
"sPaginationType": "full_numbers",

"bStateSave": false

}

[/code]

When the tables that have too many columns, or data that forces the table to stretch past the width of the screen (adding a x-scroll bar), the headers don't align with the table's data columns. If i click on a header cell to sort the data, then the table seems to recalculate the widths, and all the columns are aligned.

Is there a reference or function that fixes this, or will I need to write some code to force a "recalculation"?

Thanks in advance,
Gavin