html - 使用 rowspan 替换 HTML 表中的行颜色

Question

我有点卡在这个上面了。我需要包含“行标题”的行，这些行具有确定的“rowspan”颜色交替。颜色必须覆盖表格的整个宽度和该行的整个高度。例如，一行应为蓝色，另一行应为红色，依此类推。我试过使用 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

一个表可以有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>