使用CSS突出显示两个相邻表的行 [英] Highlight rows across two adjacent tables with CSS
本文介绍了使用CSS突出显示两个相邻表的行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个有两个相邻表的布局。当一个表中的行被悬停时,我想对两个表中的行中的单元格应用相同的样式。
I have a layout with two adjacent tables. When a row in one table is hovered, I'd like to apply the same style to the cells in the rows across both tables.
只有css可以吗?
table{
display: inline-block;
}
td{
border:1px solid grey;
}
table#lhs tr:hover{
background-color:green;
}
table#lhs tr:hover {
background-color:green;
}
<table id="lhs">
<tr>
<td>lhs row 1</td>
</tr>
<tr>
<td>lhs row 2</td>
</tr>
<tr>
<td>lhs row 3</td>
</tr>
</table>
<table id="rhs">
<tr>
<td>rhs row 1</td>
</tr>
<tr>
<td>rhs row 2</td>
</tr>
<tr>
<td>rhs row 3</td>
</tr>
</table>
推荐答案
我想出了这个,这似乎非常接近你要求的:
I came up with this, which seems pretty close to what you were asking for:
table {
display: inline-block;
}
div {
overflow:hidden;
float:left;
}
td {
border:1px solid grey;
}
table#lhs tr:hover {
background-color:green;
}
table#lhs tr:hover {
background-color:green;
}
#lhs td:hover::before {
background-color: green;
content:'\00a0';
position: absolute;
width: 10000px;
z-index: -1;
}
td {
position: relative;
}
<div>
<table id="lhs">
<tr>
<td>lhs row 1</td>
</tr>
<tr>
<td>lhs row 2</td>
</tr>
<tr>
<td>lhs row 3</td>
</tr>
</table>
<table id="rhs">
<tr>
<td>rhs row 1</td>
</tr>
<tr>
<td>rhs row 2</td>
</tr>
<tr>
<td>rhs row 3</td>
</tr>
</table>
</div>
这篇关于使用CSS突出显示两个相邻表的行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文