Alternate row color in HTML table with rowspan

Question

I'm a little stuck on this one. I need the rows containing "Row Title" who has a determined "rowspan" alternate in color. The color must cover the entire width of the table and the entire height of that row. For example, one row should be in blue and another in red and so on. I've tried with css advanced selectors like nth-child(odd) and nth-child(even) but it doesn't work for me. Any ideas? Thank you in advance.

Here I show my code.

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: #e3e3e3;
}

tbody * {
  font-weight: normal;
}

tr, th {
  padding: 10px 0;
}

th {
  width: 33.33333%;
}

.add-color {
  position: relative;
}

.add-color:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  border: 1px solid #111;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <th rowspan="3" class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th class="add-color" rowspan="2">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th rowspan="4" class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
    
  </tbody>
</table>

Possible duplicate of [Alternate table row color using CSS?](https://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css) — ElusiveCoder, Oct 01 '18 at 11:46

score 4 · Accepted Answer · answered Oct 01 '18 at 11:41

A table can have multiple tbody elements. You can use tbody with nth-child to have different colors for your groups of rows:

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: #e3e3e3;
}

tbody * {
  font-weight: normal;
}

tbody:nth-child(odd) {
  background: red;
}

tbody:nth-child(even) {
  background: blue;
}

tr,
th {
  padding: 10px 0;
}

th {
  width: 33.33333%;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th class="add-color" rowspan="2">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th rowspan="4" class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
  </tbody>
</table>

Thanks! This is just what I need. – Nacorga Oct 01 '18 at 11:58 — Nacorga, Oct 01 '18 at 11:58

score 0 · Answer 2 · answered Oct 01 '18 at 11:47

You can also try following code using background color class without your stucture change.

table {
  width: 100%;
  border-collapse: collapse;
  color: #000;
}

thead {
  background: #e3e3e3;
}

tbody * {
  font-weight: normal;
}

tr, th {
  padding: 10px 0;
}

th {
  width: 33.33333%;
}

.add-color {
  position: relative;
}

.add-color:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  border: 1px solid #111;
}
tr.bg-gray {
 background-color: gray;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>

      <tr class="bg-gray">
      <th rowspan="3" class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr class="bg-gray">
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr class="bg-gray">
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th class="add-color" rowspan="2">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr class="bg-gray">
      <th class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th rowspan="4" class="add-color">Row Title</th>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
      <th>Bla Bla</th>
      <th>Bla Bla</th>
    </tr>
    <tr>
    
  </tbody>
</table>

Alternate row color in HTML table with rowspan

2 Answers2