html - 如何突出显示两个表格行，其中一行有一个具有“rowspan”属性的单元格？

Question

这是表格的样子：

table {
  border-collapse: collapse;
}

<table border="1">
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
</table>

我想要实现的是，当用户将鼠标悬停在其中一行上时，另一相邻行以及用户悬停的行都会突出显示。我试过这个：

table {
  border-collapse: collapse;
}

table tr:nth-child(odd):hover {
  background: #CCC;
}

table tr:nth-child(odd):hover + tr {
  background: #CCC;
}

table tr:nth-child(even):hover {
  background: #CCC;
}

<table border="1">
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
</table>

这几乎可行，但是当您将鼠标悬停在显示“第 2 行文本在此处”的行上时，只有该行会突出显示。是否有针对此问题的仅 HTML/CSS 解决方法？

我在想的是类似的东西<rowgroup>。

标签： htmlcss

Answer 1

tbody标签是一个组，您可以多次使用它：

table {
  border-collapse: collapse;
}

tbody:hover {
  background: #CCC;
}

<table border="1">
  <tbody>
    <tr>
      <td rowspan="2">Text here</td>
      <td>The row 1 text goes here</td>
    </tr>
    <tr>
      <td>The row 2 text goes here</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Text here</td>
      <td>The row 1 text goes here</td>
    </tr>
    <tr>
      <td>The row 2 text goes here</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Text here</td>
      <td>The row 1 text goes here</td>
    </tr>
    <tr>
      <td>The row 2 text goes here</td>
    </tr>
  </tbody>
</table>