only active tab will resize title / header of columns correctly

alongtheivy

Ok, so I have a website with different tabs made like this:

[code]

Summary
Station
Crew
Subdivision
[/code]
....etc
[code]






[/code]

and here is my datatable code:
[code]
function (schedule) {
if (schedule) {
var crewTbl = ich.crewData(schedule);
crewTbl.find('#crewTable').dataTable( {
"sDom": "t",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"bSort": false,
"bPaginate": false,
"sScrollY": "200",
"bScrollCollapse": true
} );
fp.async(function() {
//adjust column sizing to make sure the column headers line up
$('#crewTable').dataTable().fnAdjustColumnSizing();
//this is the search filter for the table
$('#crewSearch').on('keyup',
function() {
$('#crewTable').dataTable().fnFilter($(this).val());
});
//make sure the table resizes properly when window is resized
$(window).bind('resize', function () {
$('#crewTable').dataTable().fnAdjustColumnSizing();
} );
} );
[/code]

THE PROBLEM:
the table and information on the "active pane" tab is perfect. On the other tabs, the header / titles to the columns are all pushed together on the left and won't line up with the columns. If I minimize and then maximize the window, they line up and it's perfect.
How can I fix this by having it perfect as soon as I click another tab?

Thanks