rowspan/colspan写错会导致DOM结构损坏但浏览器不报错，解析器自动补空行或空单元格，引发列数基准偏移；验证需用Array.from(tr.children).reduce((s,el)=>s+(el.colSpan||1),0)确保每行总和等于设计列数。
rowspan/colspan写错后，DOM结构已经损坏
浏览器不会报错，但解析器会自动补空行或空单元格，导致后续所有
<td rowspan="2">A</td>
<td>B</td>，第二行却还写了两个<td>，那实际渲染时第二行就变成三个单元格——其中第一个是浏览器悄悄补的空<code><td>，视觉和JS获取都不可靠。
<p>验证方法：在开发者工具中选中任意<code><tr>，运行这句代码：<pre class="brush:php;toolbar:false;">Array.from(tr.children).reduce((sum, el) => sum + (el.colSpan || 1), 0)</pre>结果必须等于表头第一行展开后的总列数（即所有<code>colspan值之和 + 普通单元格数）。
- 只要某行
colspan总和 ≠ 设计列数，整张表语义就已断裂 -
rowspan不改变当前行单元格数量，但会“占用”后续行对应列位置；被占用的位置，后续行必须跳过写<td>，而不是留空或删掉整列 <li>别信“看起来对齐了”——用<code>getBoundingClientRect()查坐标或用table.rows[i].cells.length看真实单元格数，才是真相 - 把每个
<th>的<code>colspan值加起来，没写就是1 - 把每个
<th>的<code>rowspan最大值记下来（用于判断哪些行要跳过） - 画一张二维草图：横轴是列号（从0开始），纵轴是行号，标出每个单元格覆盖的行列范围
-
id必须全局唯一，且所有被引用的<th>都在同一个<code><table>内 <li>多个<code>id用空格分隔，不能用逗号或制表符 - 旧版JAWS支持弱，但NVDA、VoiceOver、ChromeVox均稳定识别
重构前先做结构快照：数清“该有多少列”
复杂表格错乱，往往因为人脑记混了跨行跨列后的实际列数。最稳妥的做法是把表头第一行当作“列定义层”，手动展开它：
例如：<th colspan="2" rowspan="2">销售额</th>
<th>线上</th> → 第一行占列0–1，第二行也占列0–1；而“线上”只占列2，且只在第一行生效。第二行列2位置必须为空（不写<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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<h3>headers+id替代scope解决可访问性断裂</h3>
<p>当表格有两层以上表头，或者<code>colspan+rowspan混合使用后，scope属性完全失效。屏幕阅读器读不出“这个数字属于哪个部门、哪个季度”，不是兼容性问题，是语义表达能力不足。
必须改用显式绑定：<th id="dept">部门</th> 和 <th id="q1">Q1</th>，然后数据单元格写成 <td headers="dept q1">120万</td>。
放弃table-layout: fixed强行修复错位
有人想用table-layout: fixed压住变形，这是掩耳盗铃。table-layout: fixed只控制宽度分配逻辑，不修复HTML结构错误。如果某行少写了一个<td>，它只会让那一列变窄甚至坍缩，内容重叠或截断更严重。
<p>真正该做的是回归语义：每一行的单元格总数（按<code>colSpan折算）必须恒定；每个rowspan覆盖的列，在后续行对应位置必须严格留空（不写<td>，而非写<code><td></td>）；所有空课、无数据单元格，必须保留<td></td>以维持结构。
最易忽略的一点：跨行单元格的rowspan值，是它自己所在行 + 向下占用的行数，不是“总共几行”。rowspan="3"意味着它影响当前行、下一行、再下一行——共三行，第四行起恢复自由。这点一旦算错，整个tbody就全偏了。
