Easy way to hard set column width?

javamonkey79

I'm having issues with sort icons dropping below the text in headers like so:

|Col1 Text | Col2 Text | Col3 Text


It seems as though it is relative to how the col width's are calculated. I set the following properties, yet window resizing still seems to cause this to pop up again:
[code]
"bAutoWidth": false,
"aoColumns" : [
{ sWidth: '90px' },
{ sWidth: '80px' },
{ sWidth: '280px' },
{ sWidth: '300px' },
{ sWidth: '150px' },
{ sWidth: '220px' },
{ sWidth: '230px' },
{ sWidth: '210px' }
]
[/code]
Is there a standard way of fixing this, or am I doing something wrong?

TIA

allan

There is no way to absolutely definitely, 100% be certain set a column width in DataTables at the moment due to the number of variables involved (content width, padding, table size etc - it gets very messy indeed unless everything is just right, and it rarely is!). So I presume you have jQuery UI themeing on? Having you got the TH element relatively positioned that the inner icon DIV likewise, with suitable positioning?

Allan

javamonkey79

If you set the table width statically somehow and then set the column widths, would this work? Yeah, I'm kinda using jQueryUI theming (I think) but it has been a little painful to get setup right.

allan

It's possible, but unlikely to be quite that easy :-). You need to consider padding of the cells, content width (for example if you have a string "REALLY LONG..." in a 2px wide column, what happens...), border-collapse etc.

Have you got the DIV in the TH element relatively positioned like in the demos?

Allan

GregP

There's something about tables... with regards to the HTML and CSS itself. I can't recall the exact details, but it's something like: as soon as you set a width (via percent or px size), the individual column widths become guidelines more than set widths.

Wish I could recall the details, but I just wanted to throw this out there so that you would know it's an elusive prey you're hunting. Tables are tough to tame unless every single dimension is hard-coded. And if DataTables updates this at all (I don't really know if it overrides anything, but by default tables (including DataTables) want to be 100% of a containing div).