Question

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? Or is there a pure CSS solution?

Answer 1

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.