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