表格错位根源是DOM结构失衡：colspan和rowspan写对但该删的未删，导致浏览器错误排布；可用JS一行验证每行列数是否恒定，不等即错位起点。
表格错位不是“样式没调好”，而是 DOM 结构本身已失衡——colspan 和 rowspan 写对了，但该删的 <td> 没删，浏览器就按错误逻辑排布，后续所有样式、脚本、导出行为都会连锁异常。
<h3>怎么快速定位哪一行列数不对？</h3>
<p>别靠肉眼数标签，用一行 JS 实时验证每行真实列数：</p>
<pre class="brush:php;toolbar:false;">Array.from(document.querySelectorAll('table tr')).forEach((tr, i) => {
const cols = Array.from(tr.children).reduce((sum, el) => sum + (el.colSpan || 1), 0);
console.log(`第 ${i + 1} 行：${cols} 列`);
});</pre>
<ul>
<li>输出结果不全等 → 错位根源就在这儿</li>
<li>常见陷阱：<code><thead> 第一行算出是 6 列，但 <code><tbody> 某行只写了 5 个 <code><td>（漏删一个），整行右移一格
<li>注意：<code><th> 和 <code><td> 都要计入，<code>colSpan 属性值为 undefined 时默认是 1
rowspan="2" 为什么下一行还是多出一列？
因为你在下一行同列位置又写了一个 <td> —— <code>rowspan 不是“拉高”，是“吃掉下方位置”。那个位置必须彻底留空，不能是空标签，不能是注释，不能是 <td></td>。
- 正确结构：
<tr> <td rowspan="2">A</td> <td>B</td> </tr> <tr><td>C</td></tr>（第二行第一列无节点） - 错误结构：
<tr> <td rowspan="2">A</td> <td>B</td> </tr> <tr> <td>X</td> <td>C</td> </tr>（X 强占第一列，C 被挤到第三列） - 调试技巧：在开发者工具里选中带
rowspan的单元格，看 box model 是否跨行；再点开下一行 DOM，确认对应列位置是否真的没有子节点
colspan 和 rowspan 一起用，表格直接崩了怎么办？
一个 <td rowspan="2" colspan="3"> 占据的是 2×3=6 个逻辑格子。这 6 个位置里，除左上角外，其余 5 个在 HTML 源码中必须完全不存在。<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>
<ul><li>手动画网格：先标出这个单元格覆盖的行列范围（如从第 1 行第 1 列到第 2 行第 3 列），再逐行检查这些坐标是否被其他 <code><td> 占用
<li>典型翻车点：<code><thead> 用了 <code>rowspan="2" colspan="2"，但 <tbody> 第一行还在第 1 列写了 <code><td>，导致列基准偏移
<li>安全做法：动态生成表格时，在插入每个 <code><td> 前做二维坐标占用检查，避免靠“应该没问题”硬写
<p>最隐蔽的问题往往不是属性写错，而是删漏了一个 <code><td> —— 它不会报错，但会让 <code>nth-child(3) 选错元素、让 Excel 导出错行、让屏幕阅读器读串数据。结构校验必须贯穿整个开发流程，不能只在最后“看看效果”。
