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