用 position: sticky 是目前唯一原生、语义正确、可访问的固定首列方案；position: absolute 会破坏表格流，导致列宽错位、rowspan/colspan 异常、可访问性归零、滚动消失及 z-index 失效。
用 position: sticky 是目前唯一原生、语义正确、可访问的固定首列方案；position: absolute 会破坏表格结构，不推荐用于真实业务场景。
为什么不能直接给 <td> 加 position: absolute
它会让单元格脱离表格流，导致：
• 列宽自动计算失效，后续列错位或重叠
• rowspan/colspan 行为异常
• 屏幕阅读器无法识别该列，可访问性归零
• 横向滚动时固定列“消失”，因为 absolute 元素不随容器滚动
• z-index 在表格内部常失效，遮盖关系不可控
position: sticky 必须满足的三个硬条件
缺一不可，否则在 Chrome/Firefox/Safari 中都可能完全不生效：
• 首列所有 <th> 和 <td> 都要加 position: sticky; left: 0;
• <thead> 和 <tbody> 必须设 display: block;（否则 sticky 在 <tbody> 内无效）
• 整个 <table> 必须包裹在 <div style="overflow-x: auto;"> 容器里，且该容器不能有 overflow: hidden、transform 或 filter
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
容易被忽略的视觉与兼容性细节
background-color 不是美化选项，是刚需：
• 不设背景色，右侧滚动内容会从固定列下方透出
• z-index: 1 必须显式写死，不能依赖继承或默认值
• Safari 14.1+ 才稳定支持 sticky 在 <td> 上，旧版本需降级为双表 + JS 同步
• 若用 table-layout: fixed，必须配合 <colgroup> 显式设每列宽度，否则首列宽度会失控
立即学习“前端免费学习笔记（深入）”；
真正难的不是加几行 CSS，而是让所有列宽对齐、行高一致、滚动不闪、打印正常、残障用户可用——这些全靠 sticky 的上下文约束和 background/z-index 的精确控制，漏掉任意一环，都会在某个浏览器或某种操作下当场翻车。
