thead必须显式书写，不可依赖浏览器自动补全；否则dom结构不可控，导致屏幕阅读器误读、css选择器失效、js操作异常及打印丢表头。
thead 不是可选装饰，而是表格语义结构的强制组成部分——漏写或错嵌会导致屏幕阅读器误读、CSS 选择器失效、打印丢表头、JS 操作 rows 集合异常。
为什么浏览器自动补全的 thead 不可靠
你只写 <table>
<tr><th>姓名</th></tr>
<tr><td>张三</td></tr>
</table>，Chrome 可能把第一行塞进 tbody 而非 thead，结果 thead th 样式完全不生效。
<th> 必须包裹在 <code><tr> 内，<code><tr> 必须包裹在 <code><thead> 或 <code><tbody> 内，不能直接挂在 <code><table> 下 <li>浏览器补全逻辑不一致：Firefox 可能补 <code>tbody包住所有行，Safari 可能补空thead然后把<th> 塞进去但没 <code><tr> <li>补全后的 DOM 结构无法预测，<code>document.querySelector('thead tr th')在某些环境返回null- 禁止把
<th> 直接扔进 <code><tbody> —— 语义断裂，Lighthouse 语义评分归零 <h3>固定表头时 <code>thead本身不能加position: sticky给
thead元素设position: sticky; top: 0;在所有主流浏览器中均无效。真正起作用的是<th> 单元格自身。 <ul><li>必须对每个 <code><th> 单独设置 <code>position: sticky; top: 0; z-index: 10; background: white; -
tbody需设max-height和overflow-y: auto，否则sticky无滚动边界可依附 - iOS Safari 要求
<th> 有显式宽度（如 <code>width: 120px或style="width: 20%"），否则 sticky 区域计算失败 - IE11 及更早版本不支持
sticky，降级方案只能是分离thead为独立<table> 并手动同步列宽 <h3>现代项目里边框、对齐、宽度怎么写才不翻车</h3> <p>HTML5 已废弃 <code>border、align、cellpadding等属性，硬写进去浏览器静默忽略，控制台不报错——这是最危险的“看起来正常”。- 边框统一用
table { border-collapse: collapse; }+th, td { border: 1px solid #ccc; }，缺collapse会出现双线间隙 - 对齐改用 CSS：
th { text-align: center; }或整表table { text-align: right; }（th会继承但保持加粗） - 列宽优先用
<col>标签：<col style="width: 120px"> <col style="width: auto">，比给每个td加width更稳定 - 空单元格写
<td></td>或<td> </td>，别留纯换行，否则视觉错位
thead的核心价值不在视觉，而在 DOM 结构的确定性。一旦省略或错写，后续所有基于语义的操作（无障碍读取、自动化测试、服务端渲染校验、打印分页）都会不可控地偏离预期。 - 边框统一用
thead 的合法位置和嵌套规则
thead 必须作为 <table> 的直接子元素，且必须出现在 <code><caption></caption> 和 <colgroup></colgroup> 之后、<tbody> / <code><tfoot> / <code><tr> 之前。
<ul><li>一个表格最多一个 <code>thead，且内部至少含一个 <tr><li><code><tr> 内可混用 <code><th scope="col">（列头）和 <code><th scope="row">（行头），但需保持列数对齐
<li>
<code>tfoot 若存在，必须写在 thead 之后、tbody 之前（利于浏览器提前渲染页脚）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
