table 如何做到同时固定表头和第一列
来源：9-7 表格布局详解
johnny_2008
2022-02-02
老师您好，节日快乐！
请问老师如何能同时固定表头和首列呢，我尝试过表头position:sticky;top:0;，首列position:sticky;left:0;但不起作用
老师我是这块没想清楚，为什么要给thead的tr提高层级，第一行除去第一列，其他列都能固定在显示正确，但在纵向滚动的时候第一行第一列却被下面的列档住了呢?
1回答
-
你好，节日快乐，too！
应该可以做到的，参考代码如下：
<!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>
.wrapper{
width: 600px;
height: 100px;
overflow: auto;
}
table{
width: 200%;
border-collapse: collapse;
border-spacing: 0;
}
th, td{
border-bottom:1px black solid;
text-align: center;
vertical-align: middle;
}
tbody tr:nth-of-type(odd) td{ /*奇数行*/
background: pink;
}
tbody tr:nth-of-type(even) td{ /*偶数行*/
background: skyblue;
}
tbody tr td:first-child, thead tr th:first-child{
position: sticky;
left: 0;
z-index: 1;
}
thead tr th{
background: skyblue;
}
thead tr{
position: sticky;
top: 0;
z-index: 2;
}
</style>
</head>
<body>
<div class="wrapper">
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>24</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>24</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
032022-08-03
相似问题