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