使用 HTML 和 CSS 创建带有粘性标题和冻结列的可滚动表

表格是 Web 应用程序中显示结构化数据的基础。添加可滚动标题和冻结（粘性）列等功能可以使表格更加用户友好。在本文中，我们将探索如何使用纯 HTML 和 CSS 创建具有粘性标题和冻结左列的表格。

CodePen 示例

要查看正在运行的代码，请查看 CodePen 上的这个实时示例：
此代码示例使用 JS 类来制作表格。您可以使用您选择的任何框架或库来复制此内容。

该表的主要特点

• 粘性标题：垂直滚动时，表格的标题在顶部保持可见。
• 冻结左列：水平滚动时第一列保持固定。
• 可滚动内容：支持垂直和水平滚动。
• 可定制的样式：桌子设计干净而现代，具有斑马条纹和悬停效果。

HTML结构

我们使用一个带有 的简单表结构。对于 header 和

;对于行。该表被包裹在一个 div 中以实现可滚动性。代码如下：

<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 属性限制了表格的高度，确保较大数据集的垂直滚动。

粘性标题：

position: Sticky 和 ​​top: 0 属性应用于第

个元素，以确保标题在垂直滚动期间保持可见。
z-index: 2 确保标题显示在表格主体上方。

冻结左栏：

第一列使用

的 nth-child(1) 选择器进行样式设置和。
Position: Sticky 和 ​​left: 0 属性确保列在水平滚动时保持在原位。
z-index 值区分列的单元格 (5) 和标题 (6)，以确保正确的分层。

突出显示冻结列：

冻结列的背景颜色设置为红色，并使用白色文本以获得更好的可见性。您可以自定义它以符合您的设计偏好。

它如何协同工作

当您垂直滚动时，位置：粘性标题保留在 .table-container 的顶部。
水平滚动时，最左边的列保持固定，产生冻结列效果。
溢出：自动和位置：粘性的组合确保表格在两个轴上保持功能性和用户友好性。

您可以添加的增强功能

响应式调整：
使用媒体查询调整较小屏幕的列宽和表格布局。

动态内容加载：

使用 JavaScript 动态获取和填充较大数据集的行。

互动功能：

使用 JavaScript 添加行单击事件、过滤或排序以增强功能。

最后的想法

使用标准

;元素和几行 CSS，我们创建了一个强大的响应式表格，带有粘性标题和冻结的左列。这种方法是轻量级的，易于实现，并且可以在现代浏览器中无缝运行。

无论您是构建仪表板、显示报告还是处理大型数据集，此方法都能确保干净、专业且用户友好的设计。尝试一下，让我知道它如何适用于您的项目！ ？