表格是 Web 應(yīng)用程序中顯示結(jié)構(gòu)化數(shù)據(jù)的基礎(chǔ)。添加可滾動標題和凍結(jié)（粘性）列等功能可以使表格更加用戶友好。在本文中，我們將探索如何使用純 HTML 和 CSS 創(chuàng)建具有粘性標題和凍結(jié)左列的表格。

CodePen 示例

要查看正在運行的代碼，請查看 CodePen 上的這個實時示例：
此代碼示例使用 JS 類來制作表格。您可以使用您選擇的任何框架或庫來復(fù)制此內(nèi)容。

該表的主要特點

• 粘性標題：垂直滾動時，表格的標題在頂部保持可見。
• 凍結(jié)左列：水平滾動時第一列保持固定。
• 可滾動內(nèi)容：支持垂直和水平滾動。
• 可定制的樣式：桌子設(shè)計干凈而現(xiàn)代，具有斑馬條紋和懸停效果。

HTML結(jié)構(gòu)

我們使用一個帶有 的簡單表結(jié)構(gòu)。對于 header 和

;對于行。該表被包裹在一個 div 中以實現(xiàn)可滾動性。代碼如下：

<div>



<h2>
  
  
  CSS for Sticky Header and Frozen Column
</h2>

<p>Here’s the CSS that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">/* General styles */
body {
  font-family: Arial, sans-serif;
}

/* Scrollable container */
.table-container {
  border: 1px solid #e5e7eb;
  border-bottom: none;
  overflow: auto; /* Enables both horizontal and vertical scrolling */
  height: 400px; /* Limits table height for vertical scrolling */
}

/* Table layout */
.table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* Ensures consistent column widths */
}

/* Table cells and headers */
.table th,
.table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

/* Frozen first column */
.table td:nth-child(1),
.table th:nth-child(1) {
  background: red; /* Highlighted background for frozen column */
  position: sticky;
  left: 0; /* Ensures the column stays on the left */
  z-index: 5; /* Keeps the column above other cells */
  color: white;
}

/* Add higher z-index for header */
.table th:nth-child(1) {
  z-index: 6;
}

/* Sticky header */
.table th {
  background-color: #1e3a8a;
  color: white;
  font-size: 14px;
  font-weight: bold;
  position: sticky;
  top: 0; /* Makes the header stick to the top */
  z-index: 2; /* Keeps the header above the table body */
}

/* Styling for table body */
.table td {
  font-size: 14px;
  color: #6b7280;
}

/* Zebra striping for rows */
.table tr:nth-child(odd) {
  background-color: #f9fafb;
}

/* Hover effect for rows */
.table tr:hover {
  background-color: rgba(14, 116, 144, 0.1);
}

/* No data row styling */
.no-data {
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
}

解釋 CSS

可滾動容器：

.table-container 類添加了 Overflow: auto 以啟用水平和垂直滾動。 height: 400px 屬性限制了表格的高度，確保較大數(shù)據(jù)集的垂直滾動。

粘性標題：

position: Sticky 和 ??top: 0 屬性應(yīng)用于第

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

凍結(jié)左欄：

第一列使用

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

突出顯示凍結(jié)列：

凍結(jié)列的背景顏色設(shè)置為紅色，并使用白色文本以獲得更好的可見性。您可以自定義它以符合您的設(shè)計偏好。

它如何協(xié)同工作

當(dāng)您垂直滾動時，位置：粘性標題保留在 .table-container 的頂部。
水平滾動時，最左邊的列保持固定，產(chǎn)生凍結(jié)列效果。
溢出：自動和位置：粘性的組合確保表格在兩個軸上保持功能性和用戶友好性。

您可以添加的增強功能

響應(yīng)式調(diào)整：
使用媒體查詢調(diào)整較小屏幕的列寬和表格布局。

動態(tài)內(nèi)容加載：

使用 JavaScript 動態(tài)獲取和填充較大數(shù)據(jù)集的行。

互動功能：

使用 JavaScript 添加行單擊事件、過濾或排序以增強功能。

最后的想法

使用標準

;元素和幾行 CSS，我們創(chuàng)建了一個強大的響應(yīng)式表格，帶有粘性標題和凍結(jié)的左列。這種方法是輕量級的，易于實現(xiàn)，并且可以在現(xiàn)代瀏覽器中無縫運行。

無論您是構(gòu)建儀表板、顯示報告還是處理大型數(shù)據(jù)集，此方法都能確保干凈、專業(yè)且用戶友好的設(shè)計。嘗試一下，讓我知道它如何適用于您的項目！ ？

以上是使用 HTML 和 CSS 創(chuàng)建帶有粘性標題和凍結(jié)列的可滾動表的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！