sWidth isn't remaining constant

scullytr

Hello,

I'm trying to create an app with a table that dynamically re-sizes with the width of the browser window. To do so, I'm setting sWidth to a fixed width for every column except one which is set to 'auto', like so:

[code]
$('#table').dataTable({
aoColumnDefs: [
{'aTargets':[0],'sWidth':'auto','sClass':'class1'},
{'aTargets':[1],'sWidth':'90px','sClass':'class2'},
{'aTargets':[2],'sWidth':'90px','sClass':'class3'},
{'aTargets':[3],'sWidth':'115px','sClass':'class4'},
{'aTargets':[4],'sWidth':'115px','sClass':'class5'},
{'aTargets':[5],'sWidth':'115px','sClass':'class6'},
{'aTargets':[6],'sWidth':'115px','sClass':'class7'}
],
bAutoWidth: false,
bJQueryUI: false,
bPaginate: false,
bProcessing: true,
bSortClasses: false,
sDom: 't<"#footer"lfrip>',
sScrollY: '100%'
});
[/code]

However, when I resize the window two things happen:

1) The table header row doesn't change width with the table body, it stays the same.
2) The table cells with fixed widths continue to grow/shrink, instead of staying at the specified widths.

Here is the effect I'm trying to achieve: http://jsfiddle.net/kvW6n/2/embedded/result/

I greatly appreciate any insight you could give. :-)

-Tim.

scullytr

Not sure if this is the best way to go about it, but I just realized that the column widths are reset to the specified size when columns are re-ordered. This lead to the realization that the function fnAdjustColumnSizing() actually recalculates the column widths to the specified size.

So what I did is I set up an event listener on window resize:

[code]
$(window).on('resize', oTable.fnAdjustColumnSizing);
[/code]

This achieved the desired results, albeit a lot slower than if the column sizes were set with pure css.