如何在滚动 Div 中创建粘性表头？

在带有表格的滚动元素中进行粘性定位

最近引入的CSS属性position：sticky允许元素在其父容器中保持固定滚动时。然而，关于它在包含表格的滚动 div 中的功能存在一个问题。

当前情况

最初，人们认为position: Sticky 只能在其父元素内工作。但是，我们发现此属性可用于在滚动 div 中创建粘性表格标题。

解决方案

要实现此目的，只需添加以下内容样式表行：

<code class="css">thead th { position: sticky; top: 0; }</code>

<第>此样式需要元素才能发挥作用。

多标题行

如果您的表格在 中有多行，您可以将第一行设置为粘性使用以下代码：

<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

浏览器支持

截至 2018 年 3 月，对position:sticky 的支持在现代浏览器中广泛使用。您可以在 https://caniuse.com/#feat=css-sticky 查看最新的兼容性信息。

鸣谢

此发现的鸣谢归功于@ ctf0，他于 2017 年 12 月分享了这项技术。

以上是如何在滚动 Div 中创建粘性表头？的详细内容。更多信息请关注PHP中文网其他相关文章！