如何建立具有固定標題的純 CSS 可捲動表？

具有固定頁眉的僅CSS 滾動表

在這個問題中，用戶尋求使用CSS 創建具有固定頁眉和頁腳的可捲動表格僅有的。他們的具體要求包括：

• 保持頁眉、頁腳和內容行之間的列對齊
• 保持頁眉和頁腳固定，同時允許內容垂直滾動
• 僅透過HTML 表格標籤和CSS規則來完成此任務
• 確保跨瀏覽器相容性

答案

一種可能的解決方案是利用position: Sticky屬性。根據 W3C，position:sticky 透過滾動框定義元素相對於其祖先的位置，如果沒有祖先滾動，則使用視口。

但是，某些瀏覽器（例如​​ Chrome、IE、Edge）遇到了問題分配位置時：黏到表格標題行（ 或 ）。另一種似乎適用於表格的方法是將其指派給表格儲存格（）。

為了達到所需的效果，使用者可以考慮使用以下程式碼：

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

這段程式碼將表格包裝在一個div中，並使用overflow: auto來建立一個可滾動區域。表格標題被分配了一個黏性位置，確保它們在內容垂直滾動時保持固定。

附加美學樣式

該代碼段包含附加CSS 樣式以增強表格的外觀，但這些美觀對於具有固定標題的可滾動表格的主要功能來說並不是必需的。

以上是如何建立具有固定標題的純 CSS 可捲動表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！