纯css实现table固定首行、首列以及最后一列冻结
postion的sticky粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。
sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow是hidden、scroll、auto、overlay时),即便这个祖先不是最近的真实可滚动祖先。
table-layout的fixed
table-layout css属性定义了用于布局表格单元格,行和列的算法。值可以是:auto、fixed。
auto
表格和单元格的宽度取决于其包含的内容。
fixed
表格宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定,其他行单元格的宽度不会影响整列的宽度。
分析:在表格中,某些列需要指定不同的宽度,所以表格的table-layout css属性需要设置为fixed。
页面代码
"utf-8">
"table_wrap">
序号
栏目1
栏目2
栏目3
栏目4
操作
1
2
3
4
5
"#">修改
2
2
3
4
5
"#">修改
3
2
3
4
5
"#">修改
4
2
3
4
5
"#">修改
5
2
3
4
5
"#">修改
6
2
3
4
5
"#">修改
7
2
3
4
5
"#">修改
8
2
3
4
5
"#">修改
9
2
3
4
5
"#">修改
10
2
3
4
5
"#">修改
11
2
3
4
5
"#">修改
12
2
3
4
5
"#">修改
13
2
3
4
5
"#">修改
14
2
3
4
5
"#">修改
15
2
3
4
5
"#">修改
16
2
3
4
5
"#">修改
17
2
3
4
5
"#">修改
18
2
3
4
5
"#">修改
19
2
3
4
5
"#">修改
20
2
3
4
5
"#">修改
21
2
3
4
5
"#">修改
22
2
3
4
5
"#">修改
23
2
3
4
5
"#">修改
24
2
3
4
5
"#">修改
25
2
3
4
5
"#">修改
26
2
3
4
5
"#">修改
27
2
3
4
5
"#">修改
28
2
3
4
5
"#">修改
效果图