The columns.width option doesn't accept !important.

cFreed

This works fine:

$('#example').dataTable( {
  "columns": [
    { "width": "28px" },
    ...
  ]
} );

so the resulting HTML looks like <th style="width: 28px">...</th>.

But this fails:

$('#example').dataTable( {
  "columns": [
    { "width": "28px !important" },
    ...
  ]
} );

because the resulting HTML is only <th>...</th>.

Trying to identify how this may happen, I looked at the source code available at github (DataTables 1.10.15) and I found what I thought could be the responsible part, line 2028:
var t = (th.attr('style') || '').match(/width:\s*(\d+[pxem%]+)/);

But I couldn't go ahead for several reasons:
* This regex clearly selects only something like 28px in my example _but it should solely ignore the !important part, rather than returning nothing; so this line of code doesn't totally explain what I get.
* BTW I'm surprised the regex looks indifferently for pxem%rather than strictly identifying px, em, %; I don't understand why is used such a "half measure" of check.
* In my app I'm using the CDN version of DataTables, which is minified 1.10.13: I planned to try some test but couldn't even retrieve something like the above regex inside of it; so I'm stuck.

TIA for any enlightment about this, and notably about my first and main need: how can I add !important to a column.width CSS specification?

tangerine

"!important" belongs in a CSS file. Why can't you use it that way?

cFreed

@tangerine
I don't understand your comment: width: 28px also belongs in a CSS file, so why not use it that way too, rather than using what DataTables offers to specify it through columns specifications?

In the other hand, documentation for columns.width option states that it "may take any CSS value" so it appeared to me that I should be able to include !important too.

Now to be fully clear, here is why I need using !important:
1. I'm working with tables where some columns use columns.width specification for the sake of presentation.
2. However when in small screen widths I prefer to ignore those fixed widths, to avoid some ugly results (like the browser actually ignoring table-layout: fixed; due to too much length of the total of the fixed widths). So in my CSS @media screen I use th {width: auto !important;} to dynamically get fixed widths ignored when in this situation.
3. But there are columns containing icon-like buttons: I want that they keep their fixed width nevetheless. So I need their style attribute to specify width: 28px !important, where !important here keeps precedence over the #2 !important only because it features in the style attribute of the involved element (specifying it through, say, a class name affected to the involved element would not work). Hence my need to place it in the columns.width.

But sure I'd like to accept a workaround if anybody suggests one...

allan

BTW I'm surprised the regex looks indifferently for pxem%rather than strictly identifying px, em, %; I don't understand why is used such a "half measure" of check.

Good question. Basically what it is attempting to do is attempt to find the unit value and type (i.e. if it is px, em, %) so that the value can be taken from the DOM and read into DataTables for its Javascript based calculations (actually they go back into the DOM for the real calculations). So it doesn't actually need to know if it is px, em, etc at that point - it just needs to know the value and the units together. That was the simplest regex I could come up with to get that. It should really check for other values such as rem now...

However, that isn't where the issue is coming from - columns.width isn't using the !important because of this function.

That gets called from here (inside _fnCalculateColumnWidths). Looking at that now, I'm not actually sure how useful that is - the column widths have always been a bit of a nightmare to get right, and I can't recall off the top of my head why it converts all values into pixels (and that was added in before I used git).

Looking at it now, I suspect that can be safely stripped out, but the potential for breaking things is really large there (at least in terms of column alignment). So I've marked that for the next major version.

Until then, I think what you would probably have to do is have an override in your stylesheet. You mention you already have some column widths in your stylesheet - this could be one more. To toggle it via Javascript, have the Javascript add a class to the table and the CSS selector reflect that.

Sorry I haven't got a better answer just now.

Allan

cFreed

@allan
Thanks a lot for this detailed and comprehensive answer.

Even if, not surprising, like you (and obviously even less than you :-) I can't perceive the goal of the strange process made with width in the function you pointed, I understand that my need can't be satisfied through columns.width for the moment.

In the other hand, at a first glance I was preparing to write that I couldn't workaround the way you suggest, because of the precedence order of the CSS specifications, as explained in my previous post.
But I realized suddenly that I didn't do it correctly: indeed something like th.myspecialclass {width: 28px !important} didn't override the @media th {width: auto !important}... because I placed it in the "casual" CSS part.
Now I placed it in the @media part, just after the latter, and it works fine.

So it solves my issue.
Many thanks.