Achieve alternate row colours across multiple tbody elements - css

Question

Is there a way in CSS to achieve alternate row shading all rows across multiple tbody elements are treated as one group?
So for example:
<tbody>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
</tbody>
I know of nth-child, but that would not work here, since if each tbody only has one row, then they would all get coloured the same.
Anyone know of any ways to achieve this behaviour?

Answer 1

Not with CSS...no. nth-of- doesn't work that way. You would need Javascript.
Jquery makes this easy.
$("#my-table tr:even").css("background-color", "#bbbbff");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
<tbody>
<tr>
<td>Row 1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 3.1</td>
</tr>
<tr>
<td>Row 3.2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 4.1</td>
</tr>
<tr>
<td>Row 4.2</td>
</tr>
<tr>
<td>Row 4.3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 5</td>
</tr>
</tbody>
</table>

Answer 2

#my-table tbody
{
display: block;
margin: 20px auto;
}
#my-table tbody tr
{
background-color: #d88;
}
#my-table tbody:nth-child(even) tr
{
background-color: #8d8;
}
#my-table tbody:nth-child(even) tr:nth-child(even)
{
background-color: #d88;
}
#my-table tbody:nth-child(odd) tr:nth-child(odd)
{
background-color: #8d8;
}
<table id="my-table">
<tbody>
<tr><td>Row 1</td></tr>
</tbody>
<tbody>
<tr><td>Row 2</td></tr>
<tr><td>Row 2</td></tr>
</tbody>
<tbody>
<tr><td>Row 3</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 3</td></tr>
</tbody>
<tbody>
<tr><td>Row 4</td></tr>
</tbody>
<tbody>
<tr><td>Row 5</td></tr>
</tbody>
</table>

Answer 3

If the number of rows in your html markup are the same in each tbody you can use following CSS solution:
#my-table tbody:nth-child(odd)
{
background-color: red;
}
#my-table tbody:nth-child(even)
{
background-color: yellow;
}
<table id="my-table">
<tbody>
<tr>
<td>Row 1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 5</td>
</tr>
</tbody>
</table>
Otherwise you can consider using CSS3 :nth-child() Selector, example nth-child(2) to select an element at a specific index.
Alternatively you can use JavaScript, answer from #Paulie_D will solve your issue.
#tb1 tr:nth-child(1){
background-color: green;
}
#tb1 tr:nth-child(2){
background-color: red;
}
#tb2 tr:nth-child(1){
background-color: green;
}
#tb3 tr:nth-child(1){
background-color: red;
}
#tb3 tr:nth-child(2){
background-color: green;
}
#tb3 tr:nth-child(3){
background-color: red;
}
#tb4 tr:nth-child(1){
background-color: green;
}
#tb5 tr:nth-child(1){
background-color: red;
}
<table id="my-table">
<tbody id="tb1">
<tr>
<td>Row 1a</td>
</tr>
<tr>
<td>Row 1b</td>
</tr>
</tbody>
<tbody id="tb2">
<tr>
<td>Row 2a</td>
</tr>
</tbody>
<tbody id="tb3">
<tr>
<td>Row 3a</td>
</tr>
<tr>
<td>Row 3b</td>
</tr>
<tr>
<td>Row 3c</td>
</tr>
</tbody>
<tbody id="tb4">
<tr>
<td>Row 4</td>
</tr>
</tbody>
<tbody id="tb5">
<tr>
<td>Row 5a</td>
</tr>
</tbody>
</table>