用 position: sticky 是目前唯一原生、语义正确、可访问的固定首列方案；position: absolute 会破坏表格流，导致列宽错位、rowspan/colspan 异常、可访问性归零、滚动消失及 z-index 失效。

用 position: sticky 是目前唯一原生、语义正确、可访问的固定首列方案；position: absolute 会破坏表格结构，不推荐用于真实业务场景。

为什么不能直接给 加 position: absolute

它会让单元格脱离表格流，导致：
• 列宽自动计算失效，后续列错位或重叠
• rowspan/colspan 行为异常
• 屏幕阅读器无法识别该列，可访问性归零
• 横向滚动时固定列“消失”，因为 absolute 元素不随容器滚动
• z-index 在表格内部常失效，遮盖关系不可控

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

position: sticky 必须满足的三个硬条件

缺一不可，否则在 Chrome/Firefox/Safari 中都可能完全不生效：
• 首列所有 和 都要加 position: sticky; left: 0;
• 和 必须设 display: block;（否则 sticky 在 内无效）
• 整个

必须包裹在

容器里，且该容器不能有 overflow: hidden、transform 或 filter

容易被忽略的视觉与兼容性细节

background-color 不是美化选项，是刚需：
• 不设背景色，右侧滚动内容会从固定列下方透出
• z-index: 1 必须显式写死，不能依赖继承或默认值
• Safari 14.1+ 才稳定支持 sticky 在

显式设每列宽度，否则首列宽度会失控

真正难的不是加几行 CSS，而是让所有列宽对齐、行高一致、滚动不闪、打印正常、残障用户可用——这些全靠 sticky 的上下文约束和 background/z-index 的精确控制，漏掉任意一环，都会在某个浏览器或某种操作下当场翻车。

上，旧版本需降级为双表 + JS 同步
• 若用 table-layout: fixed，必须配合

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！