⽤css锁定表格头部（锁定⾏）
实现头部导航栏固定
⽤到的属性是：css固定定位
position:sticky
粘性定位元素（stickily positioned element）是位置属性为 sticky 的元素。
sticky
盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
⾸先给任意⽗节点设置：verflow:visible;
如果是 overflow:hidden的话，那就⽆法滚动了
例⼦:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demo</title>
</head>
<body>
<div id="container">
<table>
<thead>
<tr>
<th class="theadSticky">ID</th>
<th class="theadSticky">Name</th>
<th class="theadSticky">Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tom</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>Abbott</td>
<td>Male</td>
</tr>
<tr>
<td>3</td>
<td>Alan</td>
<td>Female</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css:
#container{
background: #eee;  width: 150px;
height: 1000px;
overflow:visible;
border:1px solid red; }
.theadSticky{
position:sticky;
top:10px;
}
table{
border:1px solid red; }
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。