Zebra-striping overrules my classes - but only in odd rows...
Zebra-striping overrules my classes - but only in odd rows...
I have a date-column in my table and am assigning styles to these cells (using fnCreatedCell with $(nTd).addClass(..) - for all cells.
But unfortunately the table only shows the styles in even rows, the odd rows are shown in zebra-color.
My CSS is built like this:
[code]tr.odd td.dateClass0 { background-color: #ff0909 !important; }
tr.even td.dateClass0 { background-color: #ff0b0b !important;}[/code]
so in in theory it is all in place. And when I sort the table (so that odd rows come into even places), they then show the correct style there, yet the then-odd rows are only zebra-odd.
Checked with IE9 and FF27. When I look at these cells with the WebDev-extension in FF, the odd cells show the correct class being assigned (in the code), but the "Rule"-view (right panel in inspector) does not show my CSS being used. That's different from the even rows. What kind of magic is going on there? ;-)
But unfortunately the table only shows the styles in even rows, the odd rows are shown in zebra-color.
My CSS is built like this:
[code]tr.odd td.dateClass0 { background-color: #ff0909 !important; }
tr.even td.dateClass0 { background-color: #ff0b0b !important;}[/code]
so in in theory it is all in place. And when I sort the table (so that odd rows come into even places), they then show the correct style there, yet the then-odd rows are only zebra-odd.
Checked with IE9 and FF27. When I look at these cells with the WebDev-extension in FF, the odd cells show the correct class being assigned (in the code), but the "Rule"-view (right panel in inspector) does not show my CSS being used. That's different from the even rows. What kind of magic is going on there? ;-)
This discussion has been closed.
Replies
Allan
The strange surprise with DevTools is that they do not show any of my CSS, not even in the usual strike-through for overwritten stuff - it's not there at all! But only for the odd rows.
So, is there anything special you do with odd rows (any JS-events etc. or so)?
Nope. This is the CSS DataTables uses (v1.10 - 1.9 has something similar): https://github.com/DataTables/DataTables/blob/master/media/css/jquery.dataTables.css#L95 (and the following lines for more complex operations).
The CSS inspector in Chrome is superb. It will tell you where the styles are coming from. That's all I would do if you gave a link - just fire up Chrome's inspector.
Allan
Allan
Alternatively, play with sorting etc. to make line 6 show up in an even row and you will see that cell becoming red...
> tr.even td.dateClass0
Now - perhaps I'm not getting something, but that looks like it is targeting only `even` rows to me...
Allan
Don't know how much I looked at these lines - but I never noticed these comments were wrong! :((
Thank you so much!