如何在滾動 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中文網其他相關文章！