本文介绍如何使用 CSS position: sticky 实现表格首列固定、表头固定，并支持横向滚动的响应式布局，兼顾兼容性与视觉一致性。
本文介绍如何使用 css `position: sticky` 实现表格首列固定、表头固定，并支持横向滚动的响应式布局，兼顾兼容性与视觉一致性。
在构建宽表格（尤其是数据密集型报表）时，常需同时固定首列（行标识）和表头（列标题），以便用户在水平滚动时仍能清晰识别行列上下文。单纯对 <th> 或 <td> 使用 position: sticky 只能局部生效；而直接对 <thead> 整体设为 position: fixed 虽可实现表头悬浮，但易引发定位错位、层级混乱及滚动不同步等问题。本文提供一种稳健、语义正确且无需 JavaScript 的纯 CSS 解决方案。
✅ 正确做法：分层 sticky + 容器约束
核心思路是：
- 表头单元格 <th> 全部设为 sticky，并统一 top: 0；
- 首列单元格（<th> 和 <td>）设为 sticky，并统一 left: 0；
- 为避免 left 与 top 冲突，需为左上角单元格（即 thead th:first-child）同时设置 top: 0 和 left: 0；
- 容器必须设置 overflow-x: auto，且 table 不设 position: relative（避免干扰 sticky 定位流）；
- 关键：<thead> 本身不设 position: fixed —— 这是常见误区，会导致脱离文档流、高度塌陷、与 tbody 错位等问题。
以下是优化后的完整 CSS（已适配您的结构）：
.container {
margin: 0;
padding: 0;
overflow-x: auto; /* 必须启用横向滚动 */
/* 不要加 position: relative —— 会干扰 sticky 的参考容器 */
}
table {
font-family: "Open Sans", sans-serif;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
width: max-content; /* 避免 table 被 container 压缩，确保可滚动 */
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: sticky;
top: 0;
background: #eefecd;
z-index: 10; /* 确保表头覆盖滚动中的 tbody 内容 */
padding: 0.75rem 1.5rem;
vertical-align: middle;
font-weight: 500;
color: #333;
}
/* 固定首列：所有行的第一个单元格（th 和 td）sticky 到左侧 */
th:first-child,
td:first-child {
position: sticky;
left: 0;
background-color: #fff; /* 首列背景需显式定义，避免被 tbody 条纹覆盖 */
z-index: 20; /* 高于表头，确保首列始终最前 */
}
/* 补充：左上角单元格需同时固定 top & left */
thead th:first-child {
background: #eefecd; /* 继承原表头色 */
z-index: 30; /* 最高，确保角落不被遮挡 */
}
tbody tr:nth-child(odd) td {
background: #fff;
}
tbody tr:nth-child(even) td {
background: #ececec;
}
td {
text-align: left;
padding: 1.5rem 1.5rem;
vertical-align: middle;
font-size: 1.125rem;
font-weight: normal;
}
/* 圆角优化（仅作用于可见角落） */
th:first-child {
border-top-left-radius: 0.5rem;
}
th:last-child {
border-top-right-radius: 0.5rem;
}
tr:last-child td:first-child {
border-bottom-left-radius: 0.5rem;
}
tr:last-child td:last-child {
border-bottom-right-radius: 0.5rem;
}⚠️ 注意事项与兼容性提示
- ✅ 浏览器支持：position: sticky 在现代浏览器（Chrome ≥ 59, Firefox ≥ 59, Safari ≥ 15.4, Edge ≥ 79）中稳定支持；旧版 Safari 需添加 -webkit-sticky 前缀（如需支持 iOS < 15.4）。
- ❌ 避免 position: fixed on <thead>：该写法会使 <thead> 脱离文档流，导致：
- 表格高度计算失效；
- z-index 层级失控；
- 滚动时表头与 body 行无法对齐；
- 响应式布局断裂。
- ✅ width: max-content 是关键：防止表格被 .container 强制压缩，确保内容宽度真实展开，从而触发横向滚动。
- ? 视觉一致性建议：
- 首列 background-color 应独立设置（如示例中 #fff），避免被 tbody 的奇偶行背景覆盖；
- 为 th:first-child 显式设置 z-index: 30，确保其始终位于表头与首列交叠区最上层；
- 若需多列固定（如前两列），可扩展选择器：th:nth-child(-n+2), td:nth-child(-n+2)，并配合 left: 0 / left: [width]。
✅ 最终效果验证
- 水平滚动时：所有列标题（<th>）始终悬浮于顶部；
- 水平滚动时：每行第一个单元格（含表头首列）始终锚定在最左侧；
- 垂直滚动时：表头自动随页面滚动（若需表头也垂直固定，需额外 wrapper + position: sticky on thead，但本场景未要求）；
- 无 JS、无 hack、语义清晰、可维护性强。
此方案兼顾实用性与标准合规性，是当前实现“双固定（首列 + 表头）+ 横向滚动”表格的最佳实践。
