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

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:

<table id="myTable" cellspacing=0 >
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>Column 1 Header</th>
<th>Column 2 Header</th>
<th>Column 3 Header</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%" class="ca"><input type="checkbox" /></td>
<td width="59%" class="la">output col1</td>
<td width="20%" class="ca">output col2<td>
<td width="20%" class="ca">output col3</td>
</tr>
<tr>
... (lots of other rows of data)
</tr>
</tbody>
</table>




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!