Retain fixed column width after altering column visibility?

Dachaz

Hello there,

I'm trying to achieve something which should be rather simple and straightforward, but I have spent way too much time on it that I've decided to ask here.

Namely, I have a table with variable column count, but fixed column width (table-layout: fixed;).
Upon the first render, the table renders as it should (respecting the column widths), but the moment I call fnSetColumnVis to hide a column, column widths are recalculated to fill the old table width, even though it should be the other way around (table width recalculated to match the new column count * column width).

To put it more graphically, imagine I've got a table with 2 columns, 100px width each.
Upon first render: table width = 200px, containing 2 columns of 100px width each.
Now let's call fnSetColumnVis(0, false), we get: table width = 200px, containing 1 column of 200px width
while expected is: table width = 100px, containing 1 column of 100px width

You can gather more info about my curent (work in progress) setup from the debugger: ayiwej

Thanks!

Dachaz

For the record, I've been using bAutoWidth : false previously, the state captured by debugger is probably a bit messier than it should be.

allan

The only way that this might be possible is setting `table-layout: fixed` in your CSS. however, it is not something that is explicitly supported by DataTables. DataTables tries to resize the columns to fit the given container by default.

Allan

Dachaz

Well, [code]table-layout: fixed;[/code] is set -- without it, even the initial render wouldn't respect the column sizes (which has nothing to do with DataTables, but with the way browsers render tables).

Anyway, thanks for clearing up that I wasn't missing something obvious, but that was rather trying to achieve something that is not supported.

daan

Fellows,

I have a similar problem I think. I am rendering several tables on a page. apart from being resized dynamically each table seems to get wider then the previous. So I am wondering is the below code a proper way to initialize?

[code]$(document).ready( function() {
$('.status_table').each(function(index,element) {
var oTable = $(element).dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bPaginate": false,
"sDom": 'Rlfrtip',
"bScrollCollapse": true,
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 4 ] }
]
} );
new FixedColumns( oTable, {
"iLeftColumns": 3
} );
} );
} );[/code]

Forgive me if my question is to vague (I did see some post about testcases in some environment)
I am new to all of this.

I am trying to replace a four table construct but need fixed field-widths to maintain visual compatibility. The stressing factor is that all tables of class status_table should have the three fixed columns the same width and the, dynamic number of, rest columns should all be containing the same fixed width images.

@Dachaz: how did you proceed?