Home How can I color odd-numbered table rows starting after each row with a particular class?

Questions

How can I color odd-numbered table rows starting after each row with a particular class?

January 27, 2023

I have sections in my table, so there are section-header rows and regular-rows. How can I color one in two rows, so that the next row after the section-header is always colored, like in the following snippet. I’m trying using a combination of + and :nth-child, but I can’t make it work.

table {
border-collapse: collapse;
}

.want {
  background-color: aquamarine;
}

<table>
  <tr class="table-header"><th>Blah</th><th>Blablablah</th></tr>
  <tr class="section-header"><th colspan="2">Section A</th></tr>
  <tr class="regular-row want"><td>A1</td><td>Blah</td></tr>
  <tr class="regular-row"><td>A2</td><td>Blah</td></tr>
  <tr class="regular-row want"><td>A3</td><td>Blah</td></tr>
  <tr class="regular-row"><td>A4</td><td>Blah</td></tr>
  <tr class="regular-row want"><td>A5</td><td>Blah</td></tr>
  <tr class="section-header"><th colspan="2">Section B</th></tr>
  <tr class="regular-row want"><td>B1</td><td>Blah</td></tr>
  <tr class="regular-row"><td>B2</td><td>Blah</td></tr>
  <tr class="regular-row want"><td>B3</td><td>Blah</td></tr>
  <tr class="regular-row"><td>B4</td><td>Blah</td></tr>
  <tr class="section-header"><th colspan="2">Section C</th></tr>
  <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
  <tr class="regular-row"><td>C1</td><td>Blah</td></tr>
  <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
  <tr class="section-header"><th colspan="2">Section D</th></tr>
  <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
  <tr class="regular-row"><td>C1</td><td>Blah</td></tr>
</table>

>Solution :

I suggest either nested tables or a series of tbody elements. Either would make this simple.

table {
border-collapse: collapse;
}

tbody > tr:nth-child(even) {
  background-color: aquamarine;
}

<table>
  <thead>
    <tr class="table-header"><th>Blah</th><th>Blablablah</th></tr>
  </thead>
  <tbody>
    <tr class="section-header"><th colspan="2">Section A</th></tr>
    <tr class="regular-row want"><td>A1</td><td>Blah</td></tr>
    <tr class="regular-row"><td>A2</td><td>Blah</td></tr>
    <tr class="regular-row want"><td>A3</td><td>Blah</td></tr>
    <tr class="regular-row"><td>A4</td><td>Blah</td></tr>
    <tr class="regular-row want"><td>A5</td><td>Blah</td></tr>
  </tbody>
  <tbody>
    <tr class="section-header"><th colspan="2">Section B</th></tr>
    <tr class="regular-row want"><td>B1</td><td>Blah</td></tr>
    <tr class="regular-row"><td>B2</td><td>Blah</td></tr>
    <tr class="regular-row want"><td>B3</td><td>Blah</td></tr>
    <tr class="regular-row"><td>B4</td><td>Blah</td></tr>
  </tbody>
  <tbody>
    <tr class="section-header"><th colspan="2">Section C</th></tr>
    <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
    <tr class="regular-row"><td>C1</td><td>Blah</td></tr>
    <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
  </tbody>
  <tbody>
    <tr class="section-header"><th colspan="2">Section D</th></tr>
    <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
    <tr class="regular-row"><td>C1</td><td>Blah</td></tr>
  </tbody>
</table>