HTML表格重构需严格遵循行列守恒：rowspan会吞掉正下方单元格，每行colspan总和必须一致，禁止非法嵌套tr，border-collapse需配合显式边框，且须手绘网格逐格校验。
HTML表格重构不是“改几个标签就能跑”，而是结构重算——错一个 rowspan、漏删一个 <td>，整行就偏移，边框断裂，屏幕阅读器读错，连 <code>td:nth-child(3) 都可能选不到目标单元格。
rowspan 后下一行同列还写了 <td> 就必然错位
<p>这是最常踩的坑：以为 <code>rowspan="2" 是“让这格变高”，实际是“吞掉正下方那一格”。浏览器不会跳过你写的代码，它会把下一行那个 <td> 当作新列渲染，导致整行右移。
<ul><li>❌ 错误写法：<pre class="brush:php;toolbar:false;"><tr><td rowspan="2">Name</td><td>Alice</td></tr><tr><td>Name</td><td>Bob</td></tr></pre>第二行第一个 <code><td> 多余，直接错列
<li>✅ 正确写法：第二行同一列位置必须彻底留空，只写剩余单元格</li>
<li>调试时打开开发者工具，选中该单元格 → 看 Box Model 是否跨行；再点开下一行 DOM，确认对应列位置是否真的没节点</li>
<h3>每行 <code><td> + <code><th> 的 colspan 总和必须恒定
<p>浏览器不按“你心里想的列数”排版，而是按“它数出来的格子总数”逐列填。第一行 <code>colspan="3" + <td> + <code><td> = 5 格，那第二行也必须凑够 5 格，少一个或多一个都会导致后续行全部对不齐。
<ul>
<li>用这个小脚本快速验算：<code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，每行结果必须一致
colspan 值必须是纯数字，colspan="2px" 或 colspan="two" 会被完全忽略，等同于没写<thead> 包裹后，<code><tbody> 的列数仍要对齐 —— <code><thead> 里某个 <code><th> 设了 <code>rowspan="3"，那 <tbody> 前两行对应列就得跳过
<h3>嵌套 <code><tr> 或混用自定义标签会触发隐式 <code><tbody> 补全
<p>HTML 解析器遇到非法嵌套（比如 <code><tr></tr>
<tr>）会强制插入闭合标签，生成不可见的空行。这个空行仍被计入 <code>rowspan 跨度，导致视觉错位，且无法通过肉眼发现。立即学习“前端免费学习笔记（深入）”；
- ❌ 绝对禁止：
<tr><tr><td rowspan="5">Sem2</td></tr>
—— 第二个<tr> 触发自动补 <code>，多出一行- ✅ 正确结构：所有
<tr> 必须平级，放在 <code><thead>、<code><tbody> 或 <code><tfoot> 内部 <li>用开发者工具 Elements 面板检查 DOM 树，确认没有意外插入的空 <code><tr> 或孤立 <code><tbody> <h3>border-collapse 和 table-layout 不配对用，等于白设</h3> <p>看起来像内容重叠，八成是边框干扰或列宽失控造成的“伪重叠”。但只设 <code>border-collapse: collapse不生效，因为它的作用对象仅限于<table> 元素，且必须配合显式边框声明才能压平间隙。 <ul> <li>三者必须同时存在：<pre class="brush:php;toolbar:false;">table { border-collapse: collapse; }<br>table, th, td { border: 1px solid #333; }</pre></li> <li>长文本撑破列宽？加 <code>word-break: break-all到td，别只靠table-layout: fixed—— 后者需配合固定宽度，否则无效- 给
td加float或position: absolute？立刻破坏表格流，后续单元格会上浮覆盖，这是结构性崩坏，不是样式问题真正难的不是写对第一行，而是确保从上到下每一行都满足“行列守恒”——这不是调试技巧，是重构前必须手绘网格、逐格校验的体力活。DOM 看似平静，背后全是逻辑格子在打架。
- ✅ 正确结构：所有
