不能直接给<thead>设position: sticky，因其display为table-header-group，不符合CSS规范对sticky元素必须是块级或行内级的要求；真正生效的是<th>元素，需在<th>上设置position: sticky; top: 0并确保父容器有滚动上下文、<th>有背景色和z-index。
直接用 position: sticky 配合 <thead> 是当前最可行的方案，但关键不是给 <thead> 加样式，而是给里面的 <th> 加 —— 否则在 Chrome/Firefox/Safari 里都无效。
为什么不能直接给 <thead> 设 position: sticky
<thead> 是表格内部的语义容器，浏览器不把它当作 sticky 的“可定位元素”处理。它的渲染受表格布局模型约束，top 值会被忽略。真正响应 sticky 的是 <th> 和 <td> 这类单元格级元素。
- 常见错误现象：
<thead style="position: sticky; top: 0">看起来没反应，滚动时表头跟着动 - 必须保留标准结构：
<thead><tr><th>.../tr></thead>，不能删掉<tr>或把<th>提到外面 - Firefox 旧版本（v90 及之前）对
th上的 sticky 支持不稳定，v91+ 才推荐直接用
<th> 上怎么写 position: sticky 才生效
只设 position: sticky; top: 0 不够，缺一不可的三个条件：父容器有滚动上下文、<th> 有背景色、<th> 有 z-index。
- 父容器必须设
max-height和overflow-y: auto（不能是overflow: hidden） -
<th>必须有background-color，否则滚动时文字会被下方<td>内容透出 -
z-index要显式设（比如z-index: 10），尤其当表格嵌在 Modal 或其他层叠上下文中 - iOS Safari 要额外加
transform: translateZ(0)或确保<th>有显式width（百分比或 px），否则 sticky 区域计算失败
固定表头时列宽错位的常见原因
错位几乎都来自 border-collapse: collapse 和单元格宽度未对齐。表格默认按内容自适应列宽，滚动后 <th> 和 <td> 宽度不同步，视觉上就“歪了”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 避免同时用
border-collapse: collapse和在<th>/<td>上单独设border—— 容易导致 sticky 区域像素偏移 - 推荐统一用
table-layout: fixed+ 每列<th>和第一行<td>都设相同width（如width: 20%） - 如果列宽动态变化（比如内容长度不确定），就得用 JS 同步：
th.style.width = td.offsetWidth + "px"，并在resize和scroll时节流更新 - 别给
<table>设display: block或flex—— 会破坏表格语义和列对齐逻辑
兼容老浏览器的降级思路
IE 或 Firefox v90 以下没法靠 CSS 实现，得用 JS 模拟。但注意：不能删掉原 <thead>，否则语义和可访问性全丢。
- 监听
scroll事件，读取滚动距离，用transform: translateY()动态移动<thead>的视觉位置 - 保持
<thead>在 DOM 中原位不动，只改样式，不影响屏幕阅读器和 SEO - 同步列宽时，优先读
offsetWidth而非clientWidth，后者不含 border - 移动端要防 touchmove 频繁触发，加
requestAnimationFrame节流
真正麻烦的不是加几行 CSS，而是让 <th> 的 sticky 行为在各种设备、浏览器、内容长度下都稳定对齐 —— 宽度控制和背景覆盖这两点，漏一个就会出视觉 bug。
