0
点赞
收藏
分享

微信扫一扫

用css锁定表格头部(锁定行)

pipu 2023-03-05 阅读 75


实现头部导航栏固定

​用到的属性是:​

​position:sticky​​ 

  • 粘性定位元素stickily positioned element是​​计算后​​​位置属性为 ​​sticky​​ 的元素。
  • ​sticky​​​ 
    盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 ​​table 时​​),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。​​position: sticky ​​对 ​​table​​ 元素的效果与 ​​position: relative ​​相同。

MDN的解释:​​https://developer.mozilla.org/zh-CN/docs/Web/CSS/position​​

首先给任意父节点设置: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;
}

效果图:

用css锁定表格头部(锁定行)_元素定位

举报

相关推荐

0 条评论