colspan值超出当前行实际列数会直接错位，因浏览器按声明的逻辑列数分配空间；需确保每行td/th的colspan与rowspan贡献的总列数严格一致，否则后续行被挤偏。
colspan 值超出当前行实际列数会直接错位
这是最常见也最容易被忽略的根源：浏览器渲染表格时，colspan 是按“当前行已声明的单元格总数”来分配空间的。如果某行只有 3 个 <td>，但其中一个写了 <code>colspan="4"，那它就试图占满 4 列，而整行实际只撑开 3 列宽度，后续行就会被挤偏或错行。
检查方法很简单：逐行数 <td> 和 <code><th> 的 <code>colspan 与 rowspan 贡献的“逻辑列数”，确保每行总和一致。比如：
<tr> <td colspan="2">A</td> <td>B</td> </tr><tr> <td>C</td> <td>D</td> <td>E</td> </tr>
第一行逻辑列数是 2 + 1 = 3，第二行是 1 + 1 + 1 = 3 —— 没问题；但如果第二行少写一个 <td>，就立刻错位。
<h3>嵌套表格或 CSS width 冲突会让 colspan 表现失常</h3>
<p>当父表格或单元格上设置了固定 <code>width（尤其是像素值），或者内部套了另一个表格，colspan 的自动均分逻辑会被打断。浏览器可能优先满足外层宽度约束，再强行压缩/拉伸带 colspan 的单元格，导致视觉错位。
- 避免给
<table> 或 <code><td> 设 <code>width，改用min-width或靠内容自然撑开 - 删掉所有
table { table-layout: fixed }，除非你明确控制每列宽度 —— 它会让colspan忽略内容长度 - 用开发者工具选中错位单元格，看 computed 样式里
width是否被意外继承或覆盖
rowspan 和 colspan 同时存在时，坐标对不上就必然错位
rowspan 和 colspan 共存时，浏览器内部维护一张“网格坐标表”，每个单元格占据 (r, c) 到 (r+rowspan−1, c+colspan−1) 的矩形区域。一旦某处漏写单元格、或多写一个，坐标就会偏移，后续所有 colspan 都会算错位置。
典型症状：错位从第 3 行开始，但问题出在第 1 行某个 <td rowspan="2"> 后面少了一个 <code><td>，导致第 2 行起始列偏移 1。
<ul>
<li>用 HTML 验证器（如 validator.w3.org）跑一遍，它能报出“missing cell”类错误</li>
<li>手动画个简单网格草图，标出每个单元格的跨行跨列范围，比对着代码一行行填</li>
<li>临时把所有 <code>rowspan 改成 1，确认 colspan 正常后再逐个恢复 —— 快速定位干扰源
flex 或 grid 布局里硬塞 table + colspan 很容易失效
如果表格放在 display: flex 或 display: grid 的容器里，且该容器设置了 align-items: stretch 或 justify-items: center，表格本身可能被强制拉伸或居中，导致 colspan 单元格宽度计算异常 —— 尤其是当内容为空或过短时。
- 给表格父容器加
align-items: flex-start（flex）或justify-items: start（grid） - 或者干脆给
<table> 加 <code>align="left"（虽是废弃属性，但对老浏览器兼容性强） - 更稳妥的做法：把表格单独提一层 DOM，不嵌在 flex/grid 容器里做布局主干 表格错位看着是视觉问题，根子往往在 HTML 结构的“列计数”是否严格守恒。哪怕只差一个
<td>，浏览器也会默默补空单元格并破坏原有对齐 —— 这不是 bug，是规范行为。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
