必须用模拟表格结构，因的有独立渲染逻辑，导致position:sticky错位、列宽不一致；应使用display:grid+显式grid-template-columns+单层overflow容器实现稳定固定表头和列。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

不能用 <table>，必须用 <code><div> 模拟表格结构，否则列宽必然错位、<code>position: sticky 在滚动容器内会失效。

为什么 <table> + <code>position: sticky 会错位？

浏览器对 <table> 元素有独立渲染逻辑：<code><thead> 和 <code><tbody> 不参与 Grid 轨道计算，即使外层设了 <code>display: grid，表头列宽和内容列宽仍是两套尺寸系统。常见表现包括：

• <th> 看似固定，但与下方 <code><td> 列左右偏移 <li>Safari 下 <code>sticky 完全不触发
• 右侧出现垂直滚动条后，最后一列被挤压变形

必须用 display: grid + 显式 grid-template-columns

所有行（表头、数据行）必须是同一 Grid 容器的直系子元素，共用同一套列轨道定义。关键点：

• 容器设 height + overflow-y: auto，让内容可纵向滚动
• 用 grid-template-columns: 120px 1fr 150px 100px 这类明确值定义每列宽度（避免百分比或 auto）
• 表头单元格加 position: sticky; top: 0; z-index: 10
• 首列所有单元格（含表头第一格）加 position: sticky; left: 0; z-index: 10
• 若需固定多列（如前两列），用 :nth-child(1) 和 :nth-child(2) 分别设置 left: 0 和 left: 120px

position: sticky 在嵌套 overflow 容器里会失效

这是最容易踩的坑：如果给中间区域额外套一层 div 并设 overflow-x: scroll，其内部的 sticky 元素将失去锚点。正确做法是：

立即学习“前端免费学习笔记（深入）”；

• 整个网格只有一层容器，设 overflow: auto（同时支持横向+纵向滚动）
• 不拆分“表头区”“内容区”物理结构，所有 <div> 单元格平铺在该容器下 <li>靠 <code>:nth-child() 伪类精准选中目标单元格（如 .grid > div:nth-child(-n+4) 控制前四行）
• 固定列时注意 z-index 层级：表头 top 和首列 left 同时生效时，需确保它们互不遮挡（通常 top 的 z-index 设更高）

兼容性与性能注意点

position: sticky 在现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+）已稳定支持，但仍有细节差异：

• iOS Safari 对 sticky 的 left 支持较晚，15.4 才完全可靠；低于此版本需降级为 JS 滚动监听
• 大量行（>1000）时，每个单元格都设 sticky 可能引发重排压力，建议配合虚拟滚动（只渲染可视区域）
• 避免在 sticky 元素上设 transform 或 filter，这会创建新层叠上下文，干扰定位锚点

真正难的不是写几行 CSS，而是放弃 <table> 的惯性思维——一旦接受「所有单元格都是同级 <code><div>」这个前提，<code>sticky + grid 的组合就自然成立。列宽错位、滚动失效、层级混乱，九成问题都出在结构没理清。