如何使用'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中文網其他相關文章！