首页 > web前端 > css教程 > 正文

您可以使用'position:sticky”将表头粘在滚动 div 中吗?

DDD
发布: 2024-10-29 19:55:02
原创
538 人浏览过

Can you make a table header sticky within a scrolling div using 'position: sticky'?

滚动表 Div 中的粘性标题

随着最近在 Webkit 中引入“position: Sticky”,开发人员正在探索其潜在用途。出现的一个问题是它是否可以用于在滚动 div 中维护表格的标题 (thead)。

概念

默认情况下,'position: Sticky' 将其功能限制于父元素,使其不适合这种特定场景。但是,可以利用“粘性定位”来达到所需的效果。

解决方案

要使表头粘在滚动 div 内,您可以在样式表中附加以下行:

thead th { position: sticky; top: 0; }
登录后复制

确保您的表格具有应用样式所需的“thead”和“th”元素。

实现

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // your body code
    </tbody>
</table>
登录后复制

对于“标题”中的多行,使用它来保持第一行的粘性:

thead tr:first-child th { position: sticky; top: 0; }
登录后复制

浏览器支持

截至 2018 年 3 月,“position: Sticky”在现代浏览器中得到了广泛支持:https://caniuse.com/#feat=css-sticky

Credit

该解决方案最初由 @ctf0 在 2017 年 12 月 3 日的评论中提出。

以上是您可以使用'position:sticky”将表头粘在滚动 div 中吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!