表格错位根源在于逻辑格子数不一致：每行所有单元格的colspan总和必须严格等于总列数，rowspan占用位置需后续行主动跳过，否则整行偏移；验证用Array.from(tr.children).reduce((s,el)=>s+(el.colSpan||1),0)确保每行结果相同。
检查每行单元格总数是否一致
表格错位最常发生在 rowspan 或 colspan 写错时，浏览器会按“逻辑格子数”推导列结构，一旦某行总数对不上，后续所有行都会偏移。比如总列数是 4，但某行写了 <td colspan="2"> + <code><td> + <code><td>，实际算出来是 4 个格子（2+1+1），看似没问题；但如果下一行只写 3 个 <code><td>，就立刻少 1 列，整行右移。
<p>验证方法很简单：在控制台运行这行代码，对每个 <code><tr> 执行一次：
<pre class="brush:php;toolbar:false;">Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)</pre>
<p>结果必须全部等于你预期的总列数。不一致的地方就是源头。</p>
<ul>
<li>别信“看起来对齐了”，要算数字</li>
<li>注意 <code><th> 和 <code><td> 都参与计数，不能漏
<li><code><tr> 里混了注释、空格或 <code> 不影响计算，但嵌套 <div> 会干扰 <code>children 获取
确认 border-collapse 和 table-layout 是否生效
没设 border-collapse: collapse，默认是 separate，相邻边框会双线叠加，视觉上像错位；没设 table-layout: fixed，浏览器按内容动态算列宽，Chrome、Safari、Firefox 算法不同，同一份 HTML 在不同浏览器里列宽可能差几像素，滚动时尤其明显。
立即学习“前端免费学习笔记（深入）”；
这两个 CSS 必须成对出现才稳定：
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
-
table-layout: fixed生效前提：表格本身得有明确宽度（width属性或 CSSwidth） -
border-collapse: collapse后，别再单独给<th> 或 <code><td> 加 <code>border，否则容易像素级偏移 - 移动端 Safari 对
table-layout: fixed的百分比宽度支持不稳定，建议用固定 px 值（如width: 600px）做兜底 - 别只给
<th> 设宽，<code><td> 必须同步 <li>避免混合使用 HTML <code>width="20%"和 CSSwidth: 20%，优先选其一并统一 - iOS Safari 要求
<th> 有显式 <code>width（哪怕只是width: 1%）才能正确计算 sticky 区域识别并清理布局型冗余表格
很多“错位”其实不是表格写错了，而是整个表格就不该存在——它只是被当成了 div 用。这类表格通常没
<thead>、没语义化 <code><th>、所有 <code><td> 里塞的都是 <code><div> 或 <code><img alt="如何使用HTML排查表格布局错位问题" >，还经常嵌套三层以上。快速判断方式：打开开发者工具，选中
<table>，看右侧 Styles 面板里有没有任何 border、background 或 font 相关样式；再点 Elements 面板顶部的 “Accessibility” 标签，如果 Role 显示为 <code>none或空白，基本可判定是滥用。- 删之前先备份，有些老系统靠空
<td> 占位，删了会塌 <li>替换方案优先用 <code>display: grid，列定义写成grid-template-columns: 120px 1fr 1fr比表格更可控 - 如果必须保留语义（比如报表导出），至少把纯布局层抽到外层
<div>，让 <code><table> 只管数据 真正难的不是看出哪一行偏了，而是分清那是“结构错误”还是“不该有这个结构”。多数错位问题，根子不在怎么修，而在一开始就不该用表格。</table>
- 删之前先备份，有些老系统靠空
排查 sticky 表头导致的列宽不同步
给 <th> 加 <code>position: sticky 后，如果列宽“歪了”，大概率不是 JS 同步问题，而是 <th> 和对应 <code><td> 的宽度没对齐。sticky 区域脱离文档流，但列宽仍由第一行 <code><td> 决定，如果没显式设宽，浏览器会各自按内容撑开。
<p>最稳的做法是：在 <code><th> 和第一行 <code><td> 上都写相同的 <code>width 值（CSS 或 HTML width 属性均可）。
