首頁 > web前端 > css教學 > 如何使用'position:sticky;”建立黏性表頭?

如何使用'position:sticky;”建立黏性表頭?

Mary-Kate Olsen
發布: 2024-10-29 06:25:03
原創
666 人瀏覽過

How to Create Sticky Table Headers with `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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板