表格是这样的:
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>
.
最佳答案
tbody
标签是一个组,可以使用multiple times :
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>
关于html - 如何突出显示两个表格行,其中一行的单元格具有 "rowspan"属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52566341/