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