如何使用'position:sticky;”创建粘性表头？

粘性表格标题，位置：粘性

位置：粘性；属性最近已在 Webkit 中实现，提供了一种便捷的方法来创建在页面滚动时在其父容器中保持固定的元素。虽然此功能最初仅在直接父元素中起作用，但现在它支持在表格内滚动。

问题：

如何使用position:sticky;在 div 容器内滚动时修复表格标题的属性？

答案：

在 2018 年，在标题上粘贴位置可以毫不费力地工作！只需添加以下 CSS 规则：

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

要使用粘性标题，您的表格必须包含 thead 和 th 元素。

<code class="html"><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 ></code>

如果您的 thead 包含多行，您可以指定第一行的粘性行为：

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

截至 2018 年 3 月，大多数现代浏览器都支持粘性标头。请参阅 https://caniuse.com/#feat=css-sticky 了解最新的浏览器兼容性信息。

此解决方案归功于 @ctf0，他于 2017 年 12 月 3 日在评论中分享了该解决方案。

以上是如何使用'position:sticky;”创建粘性表头？的详细内容。更多信息请关注PHP中文网其他相关文章！