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

固定標題的純 CSS捲動表格

挑戰：

目標是建立一個具有固定標題的可捲動表格標頭僅使用CSS，確保跨瀏覽器相容性並滿足以下要求標準：

• 保持頁眉、頁腳和內容行之間的列對齊
• 在內容垂直滾動時保持頁眉和頁腳固定
• 避免依賴JavaScript 或jQuery
• 只使用提供的表格標籤（table、colgroup、col、thead、tbody、 tfoot, tr, th, td)

使用Position: Sticky的解決方案：

在實施此解決方案之前應檢查對position: Sticky的支持。根據 W3C，黏性定位框的定位方式與相對定位框類似。但是，如果沒有祖先具有滾動框，則偏移量是相對於最近的具有滾動框或視口的祖先來計算的。

此行為與靜態標頭的行為一致。將黏性位置屬性指派給表格單元格元素 (th)。由於表格不是遵循其指定大小的區塊元素，因此使用包裝元素來定義滾動溢出。

範例：

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

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

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