纯css实现table固定首行、首列以及最后一列冻结

  • Home
  • 攻略百科
  • 纯css实现table固定首行、首列以及最后一列冻结

postion的sticky粘性定位 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。

sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow是hidden、scroll、auto、overlay时),即便这个祖先不是最近的真实可滚动祖先。

table-layout的fixed table-layout css属性定义了用于布局表格单元格,行和列的算法。值可以是:auto、fixed。

auto

表格和单元格的宽度取决于其包含的内容。

fixed

表格宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定,其他行单元格的宽度不会影响整列的宽度。

分析:在表格中,某些列需要指定不同的宽度,所以表格的table-layout css属性需要设置为fixed。

页面代码

序号 栏目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 修改

效果图