纯css实现table固定⾸⾏、⾸列以及最后⼀列冻结
postion的sticky粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
sticky元素会“固定”在离它最近的⼀个拥有“滚动机制”的祖先上（当该祖先的overflow是hidden、scroll、auto、overlay时），即便这个祖先不是最近的真实可滚动祖先。
table-layout的fixed
table-layout css属性定义了⽤于布局表格单元格，⾏和列的算法。值可以是：auto、fixed。
auto
表格和单元格的宽度取决于其包含的内容。
fixed
表格宽度通过表格的宽度来设置，某⼀列的宽度仅由该列⾸⾏的单元格决定，其他⾏单元格的宽度不会
影响整列的宽度。
分析：在表格中，某些列需要指定不同的宽度，所以表格的table-layout css属性需要设置为fixed。
页⾯代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.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,
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;
}
</style>
</head>
<body>
<div className="table_wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>栏⽬1</th>
<th>栏⽬2</th>
<th>栏⽬3</th>
<th>栏⽬4</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>4</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>5</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>6</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>8</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>9</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>10</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>11</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>12</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>13</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>14</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>15</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>16</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>17</td>
<td>2</td>
css设置表格滚动条<td>3</td>
<td>4</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>18</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>19</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>20</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>21</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>22</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>23</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>24</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>25</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>26</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>27</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td> </tr>
</tbody>
</table>
</div>
</body>
</html>
效果图
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论