如何在滾動表體時保持表頭固定？

透過滾動正文固定表頭

在允許正文滾動的同時保持固定表頭是 Web 開發中的常見要求。為此，請採用以下方法：

1.將表格內容包裹在兩個巢狀元素中：

• 建立一個外部表格元素（例如，#mainTable）來保存整個表格。
• 建立一個內部表格元素（例如，#mainTable）。 , #innerTable) 包含所需的表體滾動。

2。設定外部表格高度：

• 使用 CSS 將固定高度套用於外部表格（例如，#mainTable { height: 500px; }）。

3。定位內表：

• 使用CSS將內表絕對定位在外表內（例如，#innerTable {position:absolute;top:0;bottom:0;width:100%; }).

4.修正標題：

• 應用位置：黏性；到內表的標題行（例如，#innerTable th { position:sticky;top:0;}）。

5.啟用滾動：

• 確保內表的高度超過外表的高度，觸發垂直溢出。
• 使用 CSS 啟用內表滾動（例如，#innerTable {溢位：自動； }).

範例：

<div>

以上是如何在滾動表體時保持表頭固定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！