我希望在将鼠标悬停在一行上时使用行跨度突出显示 html 表格中的行。我更喜欢仅使用最少或没有 javascript 的 CSS 来实现它。 现在表格行被突出显示，但是当有一个“子”行时，它只突出显示它而不是它在视觉上是“一部分”的行。
table {
width: 100%;
}
.topLevelRow td {
border-top:double 3px silver;
}
td {
border-top:solid 1px silver;
}
tr:hover {
background-color:lightgray;
}<html>
<head></head>
<body>
<table>
<tr class="topLevelRow">
<td rowspan="3">1</td>
<td rowspan="3">Text 1</td>
<td>Sub A 1</td>
<td>Sub B 1</td>
</tr>
<tr><td>Sub A 2</td><td>Sub B 2</td></tr>
<tr><td>Sub A 3</td><td>Sub B 3</td></tr>
<!-- . -->
<tr class="topLevelRow">
<td rowspan="5">2</td>
<td rowspan="5">Text 2</td>
<td>Sub A 1</td>
<td rowspan="1">Sub B 1</td>
</tr>
<tr><td rowspan="1">Sub A 2</td><td rowspan="1">Sub B 2</td></tr>
<tr><td rowspan="1">Sub A 3</td><td rowspan="1">Sub B 3</td></tr>
<tr><td rowspan="1">Sub A 4</td><td rowspan="1">Sub B 4</td></tr>
<tr><td rowspan="1">Sub A 5</td><td rowspan="1">Sub B 5</td></tr>
</table>
</body>
</html>如您所见，它只突出显示了部分行。我怎样才能突出显示所有内容？
最佳答案
您可以使用多个 <tbody>元素来定义 table 上的区域。在这种情况下，您有一个 <table>具有一些行组的元素。使用多个 <tbody> <table> 中的元素元素也是有效的 HTML5。
table {
width: 100%;
}
td {
border-top: 1px solid silver;
}
tbody tr:nth-child(1) td {
border-top: 3px double silver;
}
tbody:hover tr {
background-color: lightgray;
}<html>
<head></head>
<body>
<table>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="3">Text 1</td>
<td>Sub A 1</td>
<td>Sub B 1</td>
</tr>
<tr><td>Sub A 2</td><td>Sub B 2</td></tr>
<tr><td>Sub A 3</td><td>Sub B 3</td></tr>
</tbody>
<tbody>
<tr>
<td rowspan="5">2</td>
<td rowspan="5">Text 2</td>
<td>Sub A 1</td>
<td>Sub B 1</td>
</tr>
<tr><td>Sub A 2</td><td>Sub B 2</td></tr>
<tr><td>Sub A 3</td><td>Sub B 3</td></tr>
<tr><td>Sub A 4</td><td>Sub B 4</td></tr>
<tr><td>Sub A 5</td><td>Sub B 5</td></tr>
</tbody>
</table>
</body>
</html>关于html - 使用 rowspan 突出显示行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55005587/