CSS3: Stripe table with multiple <tbody> elements

Question

Hello,

I've got a table with multiple <tbody> elements.
At a given time, only one <tbody> is displayed, or all of them are displayed.

I currently use this CSS3 code to stripe the table.

table tr:nth-child(even) {
  background: #efefef;
}

When a single <tbody> element is shown, everything is (obviously) fine, but when multiple <tbody> elements are shown the CSS rules apply to each one separately, and each <tbody> has its own "stripes system". Together the stripes may or may not look consistent, depending on the number of rows.

<tbody>
  <tr> [ODD]
  <tr> [EVEN]
  <tr> [ODD]
</tbody>
<tbody>
  <tr> [ODD]
  <tr> [EVEN]
</tbody>
...

Would I absolutely have to use JavaScript (...jQuery) to fix this?

Answer 1

Yeah, I think you would need script, as there is no nth-grandchild selector that would work relative to the <table>. You'd need script to make it work in older browsers anyway, so probably not a big deal.

var table= document.getElementById('sometable');
for (var i= table.rows.length; i-->0;)
    table.rows[i].className= i%2===0? 'stripe-even' : 'stripe-odd';

Answer 2

If you're using jQuery then use the :even selector, (edited: to handle visibility) like this:

$("table tr:visible:even").addClass("even");​

And a class like this:

.even { background: #efefef; }

Again, that's if you're using jQuery already, if you're not go with a pure javascript solution (including any library for just this is overkill) like bobince posted. Either way I don't see a pure CSS solution here...it's definitely a valid case, but not something that comes up often enough to make it spec-worthy.