使用 HTML 和 CSS 建立具有黏性標題和凍結列的可捲動表

表格是 Web 應用程式中顯示結構化資料的基礎。添加可捲動標題和凍結（黏性）列等功能可以使表格更加用戶友好。在本文中，我們將探索如何使用純 HTML 和 CSS 建立具有黏性標題和凍結左列的表格。

CodePen 範例

要查看正在運行的程式碼，請查看 CodePen 上的這個即時範例：
此程式碼範例使用 JS 類別來製作表格。您可以使用您選擇的任何框架或庫來複製此內容。

該表的主要特點

• 黏性標題：垂直捲動時，表格的標題在頂部保持可見。
• 凍結左列：水平滾動時第一列保持固定。
• 可捲動內容：支援垂直和水平捲動。
• 可自訂的樣式：桌子設計乾淨而現代，具有斑馬條紋和懸停效果。

HTML結構

我們使用一個有 的簡單表結構。對於 header 和

;對於行。該表被包裹在一個 div 中以實現可滾動性。程式碼如下：

解釋 CSS

可滾動容器：

.table-container 類別新增了 Overflow: auto 以啟用水平和垂直捲動。 height: 400px 屬性限制了表格的高度，確保較大資料集的垂直捲動。

黏性標題：

position: Sticky andtop: 0 屬性套用於第

個元素，以確保標題在垂直捲動期間保持可見。
z-index: 2 確保標題顯示在表格主體上方。

凍結左欄：

第一列使用

的 nth-child(1) 選擇器進行樣式設定和。
Position: Sticky 和 ​​left: 0 屬性確保列在水平滾動時保持在原位。
z-index 值區分列的儲存格 (5) 和標題 (6)，以確保正確的分層。

突出顯示凍結列：

凍結列的背景顏色設定為紅色，並使用白色文字以獲得更好的可見性。您可以自訂它以符合您的設計偏好。

它如何協同工作

當您垂直滾動時，位置：黏性標題保留在 .table-container 的頂部。
水平滾動時，最左邊的列保持固定，產生凍結列效果。
溢出：自動和位置：黏性的組合確保表格在兩個軸上保持功能性和使用者友善性。

您可以新增的增強功能

響應式調整：
使用媒體查詢調整較小畫面的列寬和表格佈局。

動態內容載入：

使用 JavaScript 動態取得和填入較大資料集的行。

互動功能：

使用 JavaScript 新增行點擊事件、過濾或排序以增強功能。

最後的想法

使用標準

;元素和幾行 CSS，我們創建了一個強大的響應式表格，帶有黏性標題和凍結的左列。這種方法是輕量級的，易於實現，並且可以在現代瀏覽器中無縫運行。

無論您是建立儀表板、顯示報告或處理大型資料集，此方法都能確保乾淨、專業且使用者友好的設計。嘗試一下，讓我知道它如何適用於您的專案！ ？

以上是使用 HTML 和 CSS 建立具有黏性標題和凍結列的可捲動表的詳細內容。更多資訊請關注PHP中文網其他相關文章！