header incorrectly sized using using scroller in conjunction with (#myTable_wrapper).css("width"

ashman

Hi all,

I have been struggling with this all day, have tried various options and still get no joy. Basically I have a simple table as such:





Column 1 Header
Column 2 Header
Column 3 Header





output col1
output col2
output col3


... (lots of other rows of data)







I would like the table width to be sized at 70%. To this purpose I set the _wrapper element width to 70% with $("#myTable_wrapper").css("width","70%"). So far so good.

The problem arises when I try to use the scroller plug-in with my table:

$('#myTable').dataTable({"bLengthChange": false,
"bPaginate": false,
"aoColumns": [{ "bSortable": false },null,null,null],
"sScrollY": "400px",
"sDom": "frtiS",
"bScrollCollapse": true
});
$("#myTable_wrapper").css("width","70%").;

When I do this, although the table itself and the body elements are sized correctly the table header is completely wrong. the header is still formatted relative to 100% table size rather than 70% table size. If you have lots and lots or rows, the header eventually redraws itself as you scroll, and the problem resolves itself.

I have tried fnReloadAjax, fnStandingRedraw setting the column widths through "aoColumnsDefs" in a variety of combinations, all to no avail. Nothing fixes the initial erroneous header display. The only way is NOT to size the table at 70%...obviously then it all works, but that is not what I need.


Anyone come across this before or has any ideas?

Many thanks!