Table rows are too short

Table rows are too short

duelingcatsduelingcats Posts: 1Questions: 0Answers: 0
edited March 2013 in Bug reports
I am having a problem where the rows that are generated after running data tables on a table are too short causing a scroll bar to appear. Here is the code I am using:

[code]
$('#MY_TABLE_HERE').dataTable({
'sScrollY': '175px',
'bPaginate': false,
'bScrollCollapse': true,
'bFilter': false,
'bInfo': false,
'bSort': false,
"aoColumns": [
{ "sWidth": "95px" },
{ "sWidth": "270px"},
{ "sWidth": "77px" },
{ "sWidth": "77px" },
{ "sWidth": "90px" },
{ "sWidth": "42px" }
]
});
[/code]

Here is an image of my table before data tables is applied. Note this is at 200% zoom so you can see that everything is lining up properly.
http://i.cubeupload.com/g75js3.png

After running datatables, here is the resulting table:
http://i.cubeupload.com/LjBw41.png

I have circled the lines in blue that are not lining up properly and you can also see the unnecessary scroll bar. The CSS for the table is fairly basic. One thing of note is I am applying border-collapse to the table and also doing [code]$('#MY_TABLE_HERE_wrapper .dataTables_scrollHeadInner table').css("border-collapse", "collapse");[/code] to also apply the border collapse on the header after creation.

I have tried to duplicate the issue here but for some reason my table is taking up the entire width rather than the specified column widths.
http://live.datatables.net/itefah/edit#javascript,html
This discussion has been closed.