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

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

CodePen 示例

要查看代码的实际效果，请查看 CodePen 上的实例：

此代码示例使用 JS 类来制作表格。您可以使用您选择的任何框架或库来复制此代码。

表格的主要特点

粘性标题：垂直滚动时，表格的标题保持在顶部可见。

冻结左列：水平滚动时第一列保持固定。

可滚动内容：支持垂直和水平滚动。

可定制的样式：桌子设计简洁现代，具有斑马条纹和悬停效果。

HTML 结构

我们使用一个简单的表格结构，其中 `` 表示标题，`` 表示行。表格被包裹在 `div` 中，以便滚动。以下是代码：


  
    
      
        Name
        Age
        Email
      
    
    
      
        John Doe
        25
        john.doe@example.com
      
      
        Jane Smith
        30
        jane.smith@example.com

Name	Age	Email
John Doe	25	john.doe@example.com
Jane Smith	30	jane.smith@example.com

粘性标题和冻结列的 CSS

以下是实现这一奇迹的 CSS：

/* 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 的顶部。

水平滚动时，最左边的列保持固定，从而产生冻结列效果。

overflow: auto 和 position: sticky 的组合确保表格在两个轴上保持功能性且用户友好。

您可以添加的增强功能

响应性调整：

使用媒体查询来调整列宽和表格布局以适应较小的屏幕。

动态内容加载：

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

互动功能：

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

最后的想法

使用标准 `` 元素和几行 CSS，我们创建了一个功能强大、响应迅速的表格，其中包含一个粘性标题和一个冻结的左列。这种方法轻量级、易于实现，并且可以在现代浏览器上无缝运行。无论您要构建仪表板、显示报告还是处理大型数据集，此方法都能确保设计简洁、专业且用户友好。尝试一下，让我知道它对您的项目有何作用！😊

CLIS.CC