纯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 "#">修改

效果图