CSS3: Stripe table with multiple <tbody> elements
- by xyz
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?
