本文介绍使用 CSS position: sticky 实现表格首列固定、表头固定，并支持横向滚动的专业方案，兼顾兼容性与视觉一致性，避免 position: fixed 带来的布局脱离和错位问题。

本文介绍使用 css `position: sticky` 实现表格首列固定、表头固定，并支持横向滚动的专业方案，兼顾兼容性与视觉一致性，避免 `position: fixed` 带来的布局脱离和错位问题。

在构建宽列数据表格（如财务报表、项目看板）时，常需同时固定首列（行标识）和整个表头（列标题），使用户在水平滚动时仍能清晰识别行列上下文。虽然 position: fixed 看似可行，但它会使 脱离文档流，导致与

列宽不同步、阴影/圆角失效、响应式错位等问题。正确且现代的解法是：对 中所有 和 中每行的 统一应用 position: sticky，并配合精确的 left 偏移控制。

✅ 推荐方案：全量 sticky + 层级 zIndex 控制

核心思路是：

• 表头所有 设置 position: sticky; top: 0; z-index: 10; —— 固定于视口顶部；
• 首列所有单元格（ th:first-child 和 td:first-child）设置 position: sticky; left: 0; z-index: 20; —— 固定于最左侧；
• 后续列无需额外样式，自然随容器滚动；
• 关键：为 和 显式设置 display: block（仅当需要独立滚动时），但本例中保持原生表格结构更稳妥，仅靠 sticky 即可生效。

  以下是优化后的完整 CSS（已适配您的原始样式）：

  .container {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    /* 确保 sticky 有参照边界 */
    position: relative;
  }
  
  table {
    font-family: "Open Sans", sans-serif;
    border-collapse: collapse;
    table-layout: auto;
    width: max-content; /* 避免 table 撑满父容器导致 sticky 失效 */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  /* 固定表头 —— 所有 th 均 sticky */
  thead th {
    position: -webkit-sticky; /* Safari 兼容 */
    position: sticky;
    top: 0;
    background: #eefecd;
    z-index: 10;
    padding: 0.75rem 1.5rem;
    vertical-align: middle;
    font-weight: 500;
  }
  
  /* 固定首列 —— thead 的第一列 & tbody 每行第一列 */
  thead th:first-child,
  tbody td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 20;
    background: inherit; /* 继承父级背景，避免遮挡 */
    /* 若需首列独立背景色，可在此覆盖 */
  }
  
  /* 为防止首列文字被滚动内容遮盖，添加轻微右padding */
  thead th:first-child,
  tbody td:first-child {
    padding-right: 1.5rem;
  }
  
  /* 常规单元格样式 */
  td {
    text-align: left;
    padding: 1.5rem 1.5rem;
    vertical-align: middle;
    font-size: 1.125rem;
    font-weight: normal;
  }
  
  tbody tr:nth-child(odd) td { background: #fff; }
  tbody tr:nth-child(even) td { background: #ececec; }
  
  /* 圆角处理（注意：sticky 元素需单独设置圆角） */
  thead th:first-child { border-top-left-radius: 0.5rem; }
  thead th:last-child { border-top-right-radius: 0.5rem; }
  tbody tr:last-child td:first-child { border-bottom-left-radius: 0.5rem; }
  tbody tr:last-child td:last-child { border-bottom-right-radius: 0.5rem; }

  ⚠️ 注意事项与最佳实践

  • table-layout: auto 是关键：若设为 fixed，列宽由首行决定，可能导致 sticky 列宽度不匹配；保持 auto 让浏览器自动计算真实宽度。
  • width: max-content：防止表格被 .container 强制压缩，确保横向滚动区域完整可用。
  • z-index 层级关系：thead th:first-child（z:20）必须高于 thead th（z:10），否则表头首列会被其他表头覆盖。
  • 移动端兼容性：iOS Safari 对 中 sticky 支持良好（iOS 13.4+），但需测试真机；旧版本可降级为 JS 方案。
  • 性能提示：避免在大量行（>1000）中滥用 sticky，可结合虚拟滚动进一步优化。

  ✅ 最终效果验证

  • 水平滚动时：所有列标题（）始终停留在顶部；
  • 所有行的首列（）始终固定在最左侧；
  • 其余单元格自由滚动，无错位、无重叠、圆角与阴影完整保留；
  • 语义化 HTML 结构不变，无障碍访问友好。

  该方案纯 CSS 实现、零 JS 依赖、符合现代标准，是构建企业级数据表格的推荐实践。