Альтернативный цвет строки в таблице HTML с размахом строк

Question

Я немного застрял на этом.Мне нужны строки, содержащие «Заголовок строки», чей определенный «диапазон строк» ​​чередуется по цвету.Цвет должен охватывать всю ширину таблицы и всю высоту этой строки.Например, один ряд должен быть синим, а другой красным и т. Д.Я пробовал с помощью расширенных селекторов CSS, таких как nth-child(odd) и nth-child(even), но у меня это не работает.Есть идеи?Заранее спасибо.

Здесь я показываю свой код.

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>

Answer 1

Вы также можете попробовать следующий код, используя класс цвета фона без изменения структуры.

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>

Answer 2

В таблице может быть несколько tbody элементов .Вы можете использовать tbody с nth-child, чтобы иметь разные цвета для ваших групп строк:

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>