Achieve alternate row colours across multiple tbody elements

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>