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>