Hiding columns makes table wider than if column was visible

blaw2422

I am trying to hide a column, and that part is working. The problem is the table gets wider for some reason. The width of the table is set to 960px in the sytle prop. If I don't hide the column, the table looks normal. I also added a grouping header using code i found in the examples section (fnDrawCallback). Even without this, it's broken.

The table is also filtered depending on a master table - when user clicks a row in master table, this table is filtered by that row.

Any ideas?


Here is the datatable code -

[code]
$table2 = $('#table-attributes').dataTable({
"fnDrawCallback": function ( oSettings ) {
if ( oSettings.aiDisplay.length == 0 )
{
return;
}

var nTrs = $('#table-attributes tbody tr');
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
for ( var i=0 ; i

blaw2422

More about the situation:
This is inside jQuery tabs, and styled using smoothness.

When I take away the "fnInitcomplete" call and remove bVisible it works fine.
Since fnInitComplete doesn't work, it will stay out.

what it looks like: http://imgur.com/a/F2Srg


This looks fine, but column needs hidden,
[code]
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [0]},
{"bSortable": false, "aTargets" : [0,1,2]}
]
[/code]

This code hides the columns but doesn't look right
[code]
"aoColumnDefs": [
{"bVisible": false, "aTargets": [0]},
{"bSortable": false, "aTargets" : [0,1,2]}
]
[/code]

blaw2422

I found the problem: I was calling $.tabs() after .dataTable(). Switched around and all is good