固定表头需对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 结构脱节。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

正确路径是：

• 保留标准 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) 触发硬件加速来兜底。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！