Column Header Position off when using sScrollX

kevin15k

My column headers are a little off when I set sScrollX to "700px". If I don't set sScrollX my column headers line up perfectly, however the table expands to the full size of the browser window even though I have my table width set to 675px.
The only thing I wish to accomplish is to have the header columns line up with the detail columns. I have many detail columns with dynamic data so I want a scroll bar to scroll through the details taking up 675 px width and 450 px height on my page while the header stays put above it.
Here is my code:
[code]
$(document).ready(function() {
$('#mainTable').dataTable( {
"bSort": false,
"bSortClasses": false,
"bPaginate": false,
"bAutoWidth": false,
"bFilter": false,
"bInfo": false,
"bLengthChange": false,
"sScrollY": "450px",
"sScrollX": "700px"
} );
} );
[/code]