具有行跨度的 HTML 表格中的备用行颜色

Question

我有点卡在这个上。我需要包含“行标题”的行，这些行具有确定的“行跨度”颜色交替。颜色必须覆盖表格的整个宽度和该行的整个高度。例如，一行应该是蓝色的，另一行应该是红色的，依此类推。我尝试过使用 nth-child(odd) 和 nth-child(even) 等 css 高级选择器，但它对我不起作用。有任何想法吗？提前谢谢你。

这里显示我的代码。

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

一个表可以有multiple tbody elements。您可以使用 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>

Answer 2

您也可以在不改变结构的情况下使用背景颜色类尝试以下代码。

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>