Menu
I've got the following table, with the first line containing 2 sub-lines and the second one containing 3 sublines.
Whith this css style, the zebra color (i.e. alternate color on two consecutive rows) is faulty, second main cell shall be white, and not gray:
tr:nth-child(odd) {background-color: #eee;}
tr:nth-child(even) {background-color: #fff;}
So is there a way to zebra color such a table the right way?
Of course, my real problem deals with much more rows, with a much more variable number of sub-lines.
<head>
<style>
tr:nth-child(odd) {background-color: #eee;}
tr:nth-child(even) {background-color: #fff;}
</style>
<head>
<body>
<table border="1">
<tr>
<td rowspan="2">
Big1
</td>
<td>
small1
</td>
</tr>
<tr>
<td>
small2
</td>
</tr>
<tr>
<td rowspan="3">
Big2
</td>
<td>
small1
</td>
</tr>
<tr>
<td>
small2
</td>
</tr>
<tr>
<td>
small3
</td>
</tr>
</table>
</body>
747
It works as it is laid out.
It isnt working as
<tr>
<td rowspan="2">
Big1
</td>
<td>
small1
</td>
</tr>
will be grey, it's the first TR (odd)
<tr>
<td>
small2
</td>
</tr>
will be white, its the second TR (even) etc.
Best way to do it will be to assign 'odd' and 'even' classes to the tr in question manually.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
