判断表格DOM是否被浏览器自动修复，需三步验证：1. Elements面板中“Edit as HTML”删空格后结构跳变即说明已被修正；2. 对比document.querySelectorAll('thead>tr')等返回值与源码行数是否一致；3. 检查innerHTML是否有浏览器自动补全的tbody等标签。
直接重构 HTML 表格不是“重写一遍就行”，而是先确认当前结构是否已被浏览器悄悄修正过——很多表格看着正常，但 document.querySelectorAll('tr') 返回的行数和源码对不上，querySelectorAll('th') 漏掉关键表头，这就是重构失败的起点。
怎么判断表格 DOM 是否被浏览器自动修复？
浏览器遇到非法嵌套（比如 <td> 直接塞在 <code><table> 下、<code><thead> 里漏了 <code><tr>）会强行重排 DOM，你看到的结构 ≠ 写的源码。
<ul><li>打开 DevTools → Elements 面板，右键任意 <code><tr> → “Edit as HTML”，删一个空格再回车：如果整个结构跳变（比如多出 <code><tbody> 或某行被挪位置），说明原始 HTML 已被修正
<li>运行 <code>document.querySelectorAll('thead > tr').length 和 document.querySelectorAll('tbody > tr').length，对比是否与源码中 <tr> 出现次数一致
<li>检查 <code>console.log(document.querySelector('table').innerHTML)，看是否有浏览器自动补的 <tbody> —— 如果有，而源码没写，就说明语义分组缺失
<h3>重构必须补全的三个语义标签</h3>
<p>不加 <code><thead>、<code><tbody>、<code><caption></caption>，CSS 选择器易失效，JS 动态插入新行可能插到表头里，读屏软件无法识别“这是表头”还是“这是数据”。
-
<caption></caption>必须是<table> 的第一个子元素，哪怕只写 <code><caption>数据表</caption>，它让屏幕阅读器知道“这张表是干啥的” <thead> 必须包裹所有表头行，不能只靠第一行全是 <code><th> 就算数；如果有多级表头，每一级都要包进 <code><thead><li><code><tbody> 不是可选装饰：没有它，<code>table.insertRow(-1)可能插到<thead> 后面而非数据区末尾；服务端渲染时也常依赖它做条件判断 <h3>colspan/rowspan 合并后为什么总错位？</h3> <p>视觉对齐了，但语义已崩。浏览器自动补的 <code><td> 不参与可访问性计算，读屏器直接跳过整行。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul><li> <code>rowspan="2"的<th> 必须出现在它覆盖的第一行，不能放在第二行再写——否则语义链断裂 <li>每行所有 <code><td> 和 <code><th> 的 <code>colspan值加起来，必须等于该表格声明的列数（比如共 4 列，那这一行的colspan总和 + 普通单元格个数 = 4）- 用 DevTools 逐行检查
<tr> 子节点数量：如果某行明显少于其他行，八成是合并后漏写了空 <code><td> 或 <code><th> <h3>table-layout: fixed 是性能开关，不是锦上添花</h3> <p>500 行 × 15 列的表格卡顿，90% 是因为没设 <code>table-layout: fixed。默认auto模式下，浏览器要扫描每行所有内容算列宽，主线程直接挂起。- 必须在
<table> 上显式写 <code>style="table-layout: fixed"，别指望 reset.css 或父级继承 - 搭配
<col>预设宽度：<col style="width: 120px"> <col style="width: auto">，禁用<th>/<code><td> 上的 <code>width属性，它们不参与 fixed 计算 - 响应式改列宽，用
@media控制<col>的width，不是在单元格里写min-width
重构表格最耗时的环节从来不是写代码，而是验证语义是否真正落地——DOM 结构、读屏顺序、JS 可操作性三者必须同步通过，缺一不可。很多人停在“样式对了”，却没跑一遍
document.querySelectorAll和 VoiceOver 听读测试，结果上线后才发现筛选功能失效、无障碍支持断层。 - 必须在
