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

2024-03-05 12:44| 来源: 网络整理| 查看: 265

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

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

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

auto

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

fixed

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

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

页面代码

.table_wrap { width: 100%; height: 100px; overflow: auto; border-bottom:1px solid #61dafb; } table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #DDDDDD; } /* 表格th/td样式 */ td,th { width: 150px; box-sizing: border-box; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; /*超出长度...*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 30px; } /* 表头固定 */ thead tr th { position: sticky; top: 0; background: #F4F4F5; height: 30px; } /* 首列固定/最后一列固定*/ th:first-child, th:last-child, td:first-child, td:last-child { position: sticky; left: 0; background: #F4F4F5; text-align: center; right: 0px; border-left: 1px solid #DDDDDD ; width: 100px; } /* 表头首列和最后一列强制最顶层 */ th:last-child, th:first-child { z-index: 3; /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/ background: #F4F4F5; } 序号栏目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 修改

效果图

【本文地址】

公司简介

联系我们