Facing this problem from qite some time

sandeepp

I have used a fixed column data table, where i have fixed first 2 columns of the table. Except these 2 i have 24 more columns which are scrollable. I have implemented this in a Django project and code is inherited from the datatables.net site. The problem is when the table loads for the first time in chrome, the columns which are present inside scrollable pare are not coming under respective headers. But when i click on sorting or do a search operation then it appears fine. In firefox its horrible, the horizontal scroller is not coming at all, the columns are breaking towards the right.

The below code am using.
===============
var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"sScrollX": "100%",
"bScrollCollapse": true,
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": GET_TERMS_LIST,
"aoColumns": [
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": true},
{ "bSearchable": false, "bSortable": false}

],
"fnInitComplete": function () {
new FixedColumns( oTable, {
"iLeftColumns": 2,
"iLeftWidth": 200
});
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});
}