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?