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

CodePen 示例

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

該表的主要特點(diǎn)

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

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

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

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

<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

可滾動(dòng)容器：

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

粘性標(biāo)題：

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

個(gè)元素，以確保標(biāo)題在垂直滾動(dòng)期間保持可見。
z-index: 2 確保標(biāo)題顯示在表格主體上方。

凍結(jié)左欄：

第一列使用

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

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

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

它如何協(xié)同工作

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

您可以添加的增強(qiáng)功能

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

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

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

互動(dòng)功能：

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

最后的想法

使用標(biāo)準(zhǔn)

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

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

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