JqueryUI Tabs with multiple tables: subsequent tabs column width is off

cdukes

Hi,
I am trying to load separate tables in multiple jqueryui tabs. All is working well except that on all tabs other than the first one, the column headers aren't aligned properly. Curiously, I've noticed that if I click to sort any of the headers, they pop into alignment.

I've tried a myriad of settings, but nothing seems to work. here's what I have:
[code]




IP Address
Subnet Mask
Hostname
VM Name
Description
NAT Address
Network
Network Description
Admin Group



various row data here



IP Address
Subnet Mask
Hostname
VM Name
Description
NAT Address
Network
Network Description
Admin Group



<!-- End tbl_<?php echo $ip_ranges[$i]?> -->



$(document).ready(function() {
var Table = $('.DataTable').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": true,
"sScrollY": "85%",
"bAutoWidth": false
} );
} ); // end doc rdy
[/code]

Images:
Tab 1 displays as expected. Tab 2 shows the problem with the column headings.
Note: I've had to erase some of the screenshot to protect the innocent :-)
Tab 1: http://s7.postimage.org/lct5217l7/tab1.jpg
Tab 2: http://s15.postimage.org/q8wv52k07/tab2.jpg

cdukes

Anyone? Sure could use some help here :-)

cdukes

Got it fixed using the demo here:
http://datatables.net/examples/api/tabs_and_scrolling.html