如何僅使用 CSS 建立固定標題和固定第一列表格？

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

問題

努力以有組織的方式顯示數據，您的目標是建立一個具有固定標題和固定第一列的HTML 表格。然而，您的探索發現了一系列依賴 JavaScript 或 jQuery 的解決方案，由於不太理想的滾動行為，在行動瀏覽器上引入了潛在的缺陷。因此，你現在的追求集中在尋找一個純 CSS 解決方案。

解決方案

幸運的是，新版本的 Chrome、Firefox 和 Edge 都支援黏性屬性，它提供了一種方法實現所需的行為。您可以將其與溢出：捲動屬性結合使用，以建立具有固定標題和列元素的動態表格。

步驟

1. 容器：首先放置表格在父 div 內並套用溢位：捲動至 div，從而啟用捲動。
2. 標題和列黏性：利用位置：黏性屬性以及頂部、右側或左側值來指定表格元素應遵循的邊緣。
3. 第一列標題黏性：利用屬性thead th:first-child 確保第一列的標題保持固定在左側

範例

HTML標記:

CSS:

此實作允許您垂直和水平滾動，同時保留標題和第一個列到位，提供改進的使用者查看表格資料的體驗。

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