單獨使用 CSS 可以建立具有固定標題的跨瀏覽器相容的滾動表嗎？

具有固定標題的純CSS 滾動表

問題：

是否有一個純CSS 解決方案來建立可滾動的具有固定標題的跨瀏覽器表格符合嗎？

要求：

• 保持頁眉、頁腳和內容行之間的列對齊
• 保持頁眉和頁腳固定，同時內容垂直滾動
• 無jQuery 或JavaScript必要
• 只使用與表格相關的標籤（table、thead、tbody、tr、th、td）

使用Position: Sticky 的解決方案：

相容性說明： 使用前檢查對position:sticky的支援解決方案。

position:sticky 相對於最近的滾動祖先或視口（如果沒有滾動祖先）定位元素。此行為與所需的黏性標頭保持一致。

但是，將position:sticky 指派給

、 或 會比較容易。標籤在各種瀏覽器中都會遇到問題。相反，將黏性屬性分配給

定義滾動溢出的包裝元素內的單元格。

代碼：

以上是單獨使用 CSS 可以建立具有固定標題的跨瀏覽器相容的滾動表嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！