css table表格 rowspan跨行后设置hover效果
将 rowspan 的多个相关行,用一个tbody包起来,然后设置tbody:hover效果,自己写了个demo,直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 80%;
margin: 0 auto;
border-right:1px solid #303133;
border-bottom:1px solid #303133;
}
table td,th {
padding: 10px 6px;
text-align: center;
height: 30px;
line-height: 30px;
letter-spacing: 2px;
border-left:1px solid #303133;
border-top:1px solid #303133
}
table tr:hover {
background-color: #f5f5f5;
}
tbody:hover {
background-color: #f5f5f5!important;
}
tbody:hover {
background-color: #f5f5f5;
}
caption {
height: 60px;
line-height: 60px;
font-weight: 600;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<caption align="top">table-demo</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>工作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td colspan="2">未知</td>
<td>it</td>
</tr>
</tbody>
<tbody class="all-tr"></tbody>
<tr>
<td>李四</td>
<td>男</td>
<td>30</td>
<td rowspan="2" style="vertical-align: middle;">销售</td>
</tr>
<tr class="aa">
<td>王五</td>
<td>男</td>
<td>40</td>
</tr>
</tbody>
</table>
</body>
</html>
鼠标悬浮在李四和王五上面的时候出现下图的hover效果: