固定表头需对th设置position: sticky; top: 0;，而非thead；必须保留标准thead/tbody结构以保障语义化，iOS需父容器设height+overflow-y:auto且th有显式width。
固定表头时 thead 不能单独用 position: sticky
直接给 thead 加 position: sticky; top: 0; 在多数浏览器里无效——因为 thead 的渲染行为受表格布局约束，它不响应 sticky 定位的包含块计算规则。真正起作用的是 th 或 td 单元格本身。
实操建议：
- 给
th设置position: sticky; top: 0; background: white; z-index: 10;（background防止滚动时文字透底） - 确保父级
table没有overflow: hidden或过小的height，否则 sticky 会被截断 - Chrome / Edge / Safari 支持良好；Firefox 对
sticky在表格单元格中的支持从 v91+ 才稳定，旧版本需降级方案
thead 的语义化不是“可有可无”的装饰
屏幕阅读器、搜索引擎、自动化测试工具都依赖 thead 明确区分表头与数据行。漏掉 thead 或用 div + CSS 模拟，会导致：表格被读作“一堆没结构的行”，排序/筛选控件无法识别列含义，Lighthouse 语义化评分直降。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用
tr直接写在table下，没包thead—— 即使视觉正常，语义已断裂 - 把
thead和tbody混在同一个tr里（比如用colspan合并后又塞进tbody） - 服务端渲染时动态拼接 HTML，漏了
thead开闭标签，导致 DOM 树错乱
固定表头 + 语义化共存的关键约束
既要 thead 语义正确，又要视觉上固定，就得接受一个事实：不能靠“隐藏原 thead、另造一个悬浮层”这种 hack 方式，否则语义和 DOM 结构脱节。
正确路径是：
- 保留标准
thead+tbody结构，不拆分、不替换 - 只对
th应用sticky，不碰thead自身样式 - 如果需要兼容老 Firefox 或 IE，改用 JavaScript 监听
scroll，动态设置th的transform: translateY()，同时保持thead在 DOM 中原位不动 - 避免给
table设定display: block或flex—— 这会彻底破坏表格语义和单元格对齐逻辑
移动端固定表头容易被忽略的坑
在 iOS Safari 上，position: sticky 在 table 内部单元格中默认失效，除非满足两个硬性条件：
-
table父容器必须有明确的height或max-height，且设overflow-y: auto -
th必须有显式width（百分比或 px），不能全靠table-layout: auto自适应，否则 sticky 区域计算异常
另外，iOS 上 z-index 对 sticky 元素的层级控制不稳定，建议用 transform: translateZ(0) 触发硬件加速来兜底。
