不是必须，但强烈建议用包裹表头；它提升语义化、可访问性及打印/滚动时表头重复显示能力，WCAG和主流UI库均要求该结构。
表格表头必须用
包裹吗？
不是必须，但强烈建议。浏览器和屏幕阅读器依赖
识别重复表头（比如分页打印或滚动时固定表头），不包裹会导致语义丢失、可访问性下降。如果只是简单展示且无辅助技术需求，直接写
也能渲染，但 WCAG 和主流 UI 库（如 Bootstrap、Ant Design）都默认要求
结构。
放在
里还是
里？
必须嵌套在
中，而该
通常放在
内——这是 HTML5 的有效结构。常见错误是把
直接丢进
，或误塞进
当作标题行（会被解析为数据行，
scope
属性失效，排序/筛选 JS 库可能忽略它）。
正确结构示例：
姓名
年龄
城市
张三 28 北京
scope
属性到底要不要加？加哪个值？
要加，尤其对非视觉用户关键。
scope="col"
表明该
是列标题，
scope="row"
是行标题（如第一列“姓名”作为行标识）。不加时，屏幕阅读器可能无法关联单元格与对应标题，读成“张三 28 北京”而缺失“姓名：张三”这样的语义。
单层表头（一维标题）→ 全部用
scope="col"
首行+首列都是标题（二维）→ 首单元格用
scope="row group"
或拆成
/
避免滥用
scope="auto"
（已废弃），也不要用
scope="colgroup"
除非真有
不生效怎么办？
纯 CSS（如
position: sticky
）依赖正确的 DOM 层级和渲染行为。
必须是
的**直接子元素**，且父容器不能有
overflow: hidden
或
transform
（会创建新层叠上下文，阻断 sticky）。另外，某些旧版 Safari 对
+
sticky
支持不稳定，稳妥做法是给
单独设
position: sticky; top: 0;
，并确保
z-index
足够高。
最小可用样式：
th {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
注意：若表格在
内，需同时给该 div 加
display: block
，否则
sticky
可能被截断。
表格语义结构本身不复杂，但
和
的组合稍有错位，就会让 JS 表格库读错维度、CSS 固定失效、读屏器报错——这些都不是渲染问题，而是逻辑断裂，后期排查成本远高于初期写对。
相关文章