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