css实现table表头和列固定

需求分析:实现table表头和固定列定位,滚动位置不变,这里采用positons: sticky粘性定位来实现。

样式代码具体结构去看demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#table {
width: 300px;
height: 300px;
overflow: auto;
border: 1px solid;
}
#table div {
width: 50px;
height: 50px;
text-align: center;
}
#table thead div{
background: red
}

#table tbody td:first-child div {
background: yellow;
}

#table thead th {
position: sticky;
top: 0;
}

#table thead th {
position: sticky;
top: 0;
z-index: 2
}
#table tbody td:first-child,#table thead th:first-child {
position: sticky;
left: 0;
}

#table thead th:first-child {
z-index: 3
}

直接设置position: sticky; left和top就可以实现了,注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时),即便这个祖先不是最近的真实可滚动祖先。

demo

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position