使用 CSS position: sticky 配合容器高度限制，无需 JavaScript 即可实现表头固定、仅 tbody 内容垂直滚动的响应式表格布局。

使用 css `position: sticky` 配合容器高度限制，无需 javascript 即可实现表头固定、仅 tbody 内容垂直滚动的响应式表格布局。

在 Web 开发中，当表格数据量较大时，常需保持表头（）始终可见，同时仅让数据行（

）支持滚动——尤其在页面顶部存在其他内容（如标题、筛选栏）的情况下。现代 CSS 提供了简洁高效的纯样式解决方案，无需依赖 JavaScript 或复杂 DOM 操作。

✅ 推荐方案：sticky + 容器约束（推荐）

核心思路是：将

包裹在具有固定高度和 overflow: auto 的容器中，并为 中的

设置 position: sticky; top: 0。该方案兼容所有现代浏览器（Chrome 56+、Firefox 59+、Safari 13.1+、Edge 16+），语义清晰、性能优异、维护成本低。

? 关键 CSS 规则说明：

• .tableFixHead 容器设定明确高度（如 80vh）并启用纵向滚动：overflow-y: auto（或简写 overflow: auto）；
• thead th 必须设置 position: sticky; top: 0; z-index: 1，确保表头吸附于容器顶部；
• z-index: 1 防止被后续内容遮挡（尤其在多层滚动区域嵌套时）；
• border-collapse: collapse 保证边框合并，提升视觉一致性；
• 建议为 th/td 统一设置内边距与背景色，增强可读性。

? 完整示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>固定表头表格</title>
  <style>
    .tableFixHead {
      overflow-y: auto;
      height: 80vh; /* 可根据实际布局调整，如 calc(100vh - 120px) */
      margin-top: 1rem;
    }
    .tableFixHead thead th {
      position: sticky;
      top: 0;
      background: #f5f5f5;
      z-index: 1;
      border-bottom: 2px solid #ccc;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      font-size: 14px;
    }
    th, td {
      padding: 10px 12px;
      text-align: left;
      border: 1px solid #ddd;
    }
    th {
      font-weight: 600;
      color: #333;
    }
  </style>
</head>
<body>
  <div>
    <h1>EMPLOYEE DATA FOR MAY 2023</h1>
    <p>部门统计汇总｜更新时间：2023-05-31</p>
  </div>
  <div class="tableFixHead">
    <table>
      <thead>
        <tr>
          <th>SR.NO</th>
          <th>EMPLOYEE</th>
          <th>DEPARTMENT</th>
          <th>SALARY (¥)</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Hritik</td><td>Engineering</td><td>18,500</td></tr>
        <tr><td>2</td><td>Jay</td><td>Marketing</td><td>12,200</td></tr>
        <!-- 更多数据行... -->
        <tr><td>50</td><td>Zoe</td><td>HR</td><td>14,800</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

⚠️ 注意事项与最佳实践

• 避免对 直接设 height 和 overflow：这会导致整个表格（含表头）被裁剪。务必用外层
  封装并控制滚动区域。
• 多行表头支持：若