您可以使用'position:sticky”將表頭黏在滾動 div 中嗎？

滾動表Div 中的粘性標題

隨著最近在Webkit 中引入“position: Sticky”，開發人員正在探索其潛在用途。出現的一個問題是它是否可以用於在滾動 div 中維護表格的標題 (thead)。

概念

預設情況下，'position: Sticky' 將其功能限制於父元素，使其不適合這種特定場景。但是，可以利用「黏性定位」來達到所需的效果。

解決方案

要讓表頭黏在捲動div 內，您可以在樣式表中附加以下行：

thead th { position: sticky; top: 0; }

確保您的表格具有套用樣式所需的“thead”和“th”元素。

實作

<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>

對於「標題」中的多行，使用它來保持第一行的黏性：

thead tr:first-child th { position: sticky; top: 0; }

瀏覽器支援

截至2018 年3 月，「position: Sticky」在現代瀏覽器中得到了廣泛支援：https://caniuse.com/#feat=css-sticky

Credit

該解決方案最初由@ctf0 在2017 年12 月3 日的評論中提出。

以上是您可以使用'position:sticky”將表頭黏在滾動 div 中嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！