Question

I have a bit of php determining the value of a variable, which essentially checks to see 0,1, or 2. If it’s 1, it adds a css class to my row.

Sadly i’ve noticed a minor bug that resets this styling if the zebra widget is enabled, and I sort the results. I can’t really style my table with css3 as it messes up when sorted doesn’t it?

Anyone else had this problem, setting !important; on my custom CSS classes doesn’t work

Should I include my CSS classes with !important; very last or something?

Answer 1

The best answer would be to drop the Javascript solution to this, because pure CSS can do zebra striping just fine, using the :nth-child() selector:

tr:nth-child(odd) {
  background-color: #FFFFFF;
}

tr:nth-child(even) {
  background-color: #CCCCCC;
}

With the above, you have no need to add 1 and 2 classes to your table rows, and the browser will automatically pick up the correct rows to style when the table is sorted, without you having to do anything else. It works without needing any javascript code at all.

The obvious big caveat to this is that nth-child() isn’t supported by IE8 and earlier.

For this, you do need a Javascript solution, but I’d suggest using one which helps IE to recognise this selector, rather than a javascript solution that does the whole thing.

There are two JS solutions for IE which help give it support for additional CSS selectors:

• Selectivizr
• Dean Edwards’ IE7.js

Either of these will allow IE to use the above CSS code. Selectivzr is more modern and more focussed on CSS selectors. IE7.js is an older script which tries to do a lot more. I’d suggest using Selectivzr as a first choice because it’s known to work well with jQuery, but you may be tempted by some of the other stuff the IE7.js does, so it may be worth giving it a try.

Hope that helps.