如何僅使用 CSS 建立固定標題和清單？

使用純CSS 創建具有固定標題和列的表格

修復標題：

若要在不使用JavaScript的情況下建立固定標題，可以使用position:sticky屬性。此屬性支援在現代版本的 Chrome、Firefox 和 Edge 瀏覽器中將元素貼到頂部和側面。

修復第一列：

修復第一列，可以使用相同的position:sticky屬性，但附加一個left:0樣式來強制元素粘在左側表。

範例實作：

1. 將表格放置在具有溢出：滾動屬性的容器中，該屬性可以在容器內滾動。
2. 使用位置：置頂；頂部：0；在 thead 元素上設定樣式，將標題行貼到表格頂部。
3. 新增位置：sticky；左：0；到 tbody th 來修復第一列。
4. 為了確保黏性標題行保持在所有其他元素之上，請在 thead th 上設定 z-index: 1。
5. 可選地，加上 border-right: 1px實心#CCC；和盒子陰影：1px 0 0 0 #ccc；到 tbody 來模擬固定列上的邊框。

注意：為了確保此設定正常工作，為容器。

以上是如何僅使用 CSS 建立固定標題和清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！