本文介绍使用 CSS position: sticky 实现表格首列固定、表头固定，并支持横向滚动的专业方案，兼顾兼容性与视觉一致性，避免 position: fixed 带来的布局脱离和错位问题。
本文介绍使用 css `position: sticky` 实现表格首列固定、表头固定，并支持横向滚动的专业方案，兼顾兼容性与视觉一致性，避免 `position: fixed` 带来的布局脱离和错位问题。
在构建宽列数据表格（如财务报表、项目看板）时，常需同时固定首列（行标识）和整个表头（列标题），使用户在水平滚动时仍能清晰识别行列上下文。虽然 position: fixed 看似可行，但它会使 <thead> 脱离文档流，导致与 <tbody> 列宽不同步、阴影/圆角失效、响应式错位等问题。正确且现代的解法是：对 <thead> 中所有 <th> 和 <tbody> 中每行的 <td:first-child> 统一应用 position: sticky，并配合精确的 left 偏移控制。
✅ 推荐方案：全量 sticky + 层级 zIndex 控制
核心思路是：
- 表头所有 <th> 设置 position: sticky; top: 0; z-index: 10; —— 固定于视口顶部；
- 首列所有单元格（<thead> th:first-child 和 <tbody> td:first-child）设置 position: sticky; left: 0; z-index: 20; —— 固定于最左侧；
- 后续列无需额外样式，自然随容器滚动；
- 关键：为 <thead> 和 <tbody> 显式设置 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 对 <thead> 中 sticky 支持良好（iOS 13.4+），但需测试真机；旧版本可降级为 JS 方案。
- 性能提示：避免在大量行（>1000）中滥用 sticky，可结合虚拟滚动进一步优化。
✅ 最终效果验证
- 水平滚动时：所有列标题（<th>）始终停留在顶部；
- 所有行的首列（<td>）始终固定在最左侧；
- 其余单元格自由滚动，无错位、无重叠、圆角与阴影完整保留；
- 语义化 HTML 结构不变，无障碍访问友好。
该方案纯 CSS 实现、零 JS 依赖、符合现代标准，是构建企业级数据表格的推荐实践。
