position: sticky 在原生 中对 或 无效，因 display: table-cell 阻断定位上下文；可靠方案是改用 display: grid 布局或三层 div 同步滚动。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
position: sticky 在原生 <table> 中对 <code><th> 或 <code><td> 大概率无效，这不是写法错，而是规范和渲染模型限制——<code>display: table-cell 阻断了 sticky 的定位上下文。真能用的方案，必须绕开原生表格结构或严格约束容器行为。
为什么给 <th> 加 <code>position: sticky; left: 0 没反应
浏览器（尤其 Safari 旧版、Firefox 全周期）不保证 sticky 在 table-cell 上生效，因为表格布局属于独立渲染流，<tbody> 和 <code><tr> 不构成 sticky 所需的「块级格式化上下文」。常见现象是：列看似固定，但一滚动就跳动、错位，或完全静默失效。
<p>即使 Chrome 最新版偶尔“看起来可以”，也依赖父容器恰好满足宽度、溢出、层叠顺序等隐式条件，不可靠。</p>
<ul><li>直接在 <code><table> 标签上设 <code>overflow-x: auto —— 无效，<table> 本身不响应 <code>overflow
<th> 加 <code>left: 0，没同步给对应 <td> —— 表头固定了，数据列却跟着滚动
<li>没设 <code>background-color —— 滚动时右侧内容透上来，文字被盖住<table> 父容器是 <code>display: inline 或未设明确宽度 —— sticky 失去参考基准
用 display: grid 替代 <table> 是最稳路径
<p>放弃语义化 <code><table> 标签，改用 <code>div + grid，把固定逻辑交给容器控制，而非单元格自身。这是目前兼容性、可维护性、调试效率最高的做法。
关键不是“怎么让列不动”，而是“怎么让整个行区域在滚动时，左侧部分始终卡在视口左边界”。grid 天然支持 position: sticky 作用于子项，且列宽可控。
立即学习“前端免费学习笔记（深入）”；
- 外层
.grid-table设display: grid; grid-template-columns: 120px 1fr 1fr 1fr;—— 前几列必须显式定宽，否则left偏移无法对齐 - 需要固定的列（如首列）加
position: sticky; left: 0; z-index: 2; background: white; - 第二列固定？再加一个
left: 120px;，第三列left: 270px;（前两列宽之和），依此类推 - 务必设
overflow-x: auto在.grid-table上，且其父容器不能是inline或无宽度约束 - 表头也要固定？单独给第一行所有子元素加
position: sticky; top: 0;，并确保z-index高于列固定项
非得用原生 <table>？只能靠三层 <code>div 同步滚动
如果 SEO、无障碍或遗留系统强制要求保留 <table> 语义，唯一可行方案是视觉拆分：把表格逻辑切为 <code>left-fixed、main-scroll、right-fixed 三个平行 div，各自内部用 display: table 模拟，再用 JS 同步横向滚动位置。
这不是纯 CSS 方案，但比硬套 sticky 更可控，且能覆盖 IE11（需降级为 absolute + scrollLeft 监听）。
- 三个容器必须行高完全一致 —— 推荐统一设
line-height和vertical-align: middle，避免视觉错行 - 监听
main-scroll.scrollLeft，节流后赋值给left-fixed.scrollLeft = 0（它不滚动，只重定位） - 边框对齐易出问题？统一用
border-collapse: separate; border-spacing: 0;，别用collapse - 滚动条占位导致底部横线断开？给外层 wrapper 加
padding-bottom: 17px; margin-bottom: -17px; - 不要在
<th> 里嵌 <code>flex或grid—— 会破坏行高计算基准overflow-x: auto不出滚动条？先查这三处内容明显溢出但无滚动条，根本原因常是尺寸链断裂，不是 CSS 写错了。
-
.table-wrapper是否设了white-space: nowrap？没它，长文本自动换行，宽度压不超容器 <table> 或 <code>grid容器是否用了width: 100%且父容器又没设宽度？结果就是“100% of undefined” → 宽度塌缩- 是否误加了
display: inline或inline-block到滚动容器？它们不创建块级格式化上下文，overflow失效
真正起作用的永远是「有明确宽度 + 显式
overflow-x: auto的块级父容器」，而不是<table> 本身。固定列的复杂点不在定位，而在宽度对齐和滚动上下文的显式声明——漏掉任意一环，整个效果就断掉。</table> -
