Column formatting with ultra-thin columns

j_singh

Hi.

I have a grid with 4 "normal" columns and 8 ultra-thin columns. The ultra-thin columns are supposed to be 12 px wide each, not sortable or anything. They have no content, the TD style displays a little dot (or not) through CSS sprites. The column headings, the TH tags, also have no content, the class is 12 px wide, 72 px high, also shown through CSS sprites. (The headings show vertical text, written sideways to keep the columns thin).

DataTables crunches the ultra-thin columns to be 1px wide. I wanted them thin but not that thin :-). Is there a way to suppress DataTables functionality for the ultra-thin columns?

Thanks.

PS: I have only been using DataTables only for a couple of weeks and in the process of converting one of my web sites to use it more deeply. Impressive piece of work!

allan

HI j_singh,

Good to hear DataTables is going well for you. I'd suggest setting bAutoWidth to false during your initialisation: http://datatables.net/usage/features#bAutoWidth and setting your widths required in your HTML, or by CSS. This way DataTables will stop trying to be "clever" :-)

Regards,
Allan

j_singh

Thank you. That was extremely helpful.

As a result of doing this, I ran into another problem. I have solved it for now but wish there were a better solution.

On the same page, I actually have two dataTables grids. One of them is as described above, with some ultra-thin columns. The other one is "normal". The problem is, for the normal grid I had imported a couple of the dataTables CSS files. Doing so applies the same CSS to both grids, which wants to make the ultra-thin columns a bit wider again so we go around the problem one more time :-(. My solution was to remove the @import statements and take over the CSS of the normal grid also, but that's not what I really want.

Any thoughts?

j_singh

Ah, I think I know what I want to do, Allan: a removeClass from the TH elements of the ultra-thin columns. I'll try that.

Meanwhile, if there is a still better way, something that leverages existing dataTables functionality, please let me know.

allan

Hi j_singh,

Can you not apply a different class to the table, and target the CSS selectors as required? Firebug is an excellent way of just messing around with CSS to see what works, and if each table has a different class, you can target different definitions at them.

Regards,
Allan