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

滚动表 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中文网其他相关文章！