position: sticky 在原生 中需满足三大前提：外层容器设 max-height + overflow-y: auto； 必须有 background-color 和 z-index；ios safari 需 transform: translatez(0) 或显式宽度，且 table-layout: fixed 为必需项。
position: sticky 在原生 <table> 中不是“开箱即用”的功能，它极易因父容器、渲染模型或浏览器差异而失效。直接给 <code><thead> 加 <code>position: sticky 几乎一定失败；真正能生效的是对 <th> 和 <code><td> 单独设置，并满足多个硬性条件。
<h3>为什么 <code><th> 上加 <code>position: sticky; top: 0 还是不固定
这不是 CSS 写错了，而是缺了三个关键前提：
- 外层容器（比如包裹
<table> 的 <code><div>）必须有 <code>max-height+overflow-y: auto，否则没有滚动上下文，sticky就没“粘”的对象 <th> 必须设 <code>background-color，否则滚动时下方<td> 的文字会透上来，视觉上像“没固定” <li><code><th> 必须显式设 <code>z-index（如z-index: 10），尤其当表格在 Modal、Drawer 或其他层叠容器里时，否则会被遮挡- iOS Safari 要额外加
transform: translateZ(0)或确保<th> 有明确宽度（<code>width: 120px或width: 20%），否则 sticky 区域计算偏移table-layout: fixed不是可选项，是必需项默认的
table-layout: auto会让列宽随内容伸缩，一旦滚动，<th> 和对应 <code><td> 宽度不同步，表头立刻“错位”。必须强制统一列宽逻辑： <ul><li>给 <code><table> 设 <code>table-layout: fixed; width: 100% - 为每一列的
<th> 和第一行 <code><td> 设置相同宽度，例如：<code><th style="width: 150px">姓名</th>+<td style="width: 150px">张三</td> - 避免混用
border-collapse: collapse和单元格单独边框——容易导致 sticky 区域像素级偏移 - 第一列：所有
<th> 和 <code><td> 都设 <code>position: sticky; left: 0; z-index: 2; background: white - 第二列：若前两列总宽为
280px（如150px + 130px），则该列所有单元格设left: 280px，不能写left: 130px <thead> 中的固定列单元格要同时写 <code>top: 0和left: X；<tbody> 中只写 <code>left: X，不加top，否则行为异常- 所有固定列单元格的
z-index必须一致或递增，否则 Safari 下会出现层叠错乱 - 每列宽度统一用
minmax(120px, 1fr)（grid）或flex: 0 0 120px（flex）控制，杜绝自适应撑开 - 表头
<div class="cell"> 设 <code>position: sticky; top: 0; z-index: 1，并确保其父容器有position: relative或transform: translateZ(0)触发层叠上下文这种结构绕过了浏览器对表格内部渲染模型的限制，也更容易做响应式断点切换或无障碍增强——只是需要多一层 DOM，但换来的是可预测的行为和调试友好性。
固定左侧列时，left 值怎么算才不飘
固定列不是只设 left: 0 就完事。多列固定时，left 是累积值，且必须和 top 分开处理：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
