colspan="n" 的本质是让单元格占据 n 列空间，并自动跳过后续 n−1 个单元格位置。关键是每行的逻辑列总数必须保持一致；浏览器仅依据标签结构渲染，不会自动修正列数错位问题。

colspan="n" 是如何实现单元格跨多列的

很多人误以为 colspan 是“拉伸”单元格，实际上它采用的是“占位并跳过”的机制。举例来说，colspan="3" 表示该 或 会占用自身位置，同时跳过右侧两个单元格的位置，后续的同级单元格会自动向右移动。浏览器不会自动删除多余的 ，只会按你编写的标签逐个渲染。

• 若你写 标题AB，这一行实际包含 5 列（3+1+1）。
• 但如果你的意图是“总共 3 列”，那么后面只能再跟 2 个普通 ，不能跟 3 个。
• colspan="0" 会被所有主流浏览器忽略，不建议使用。

为什么加了 colspan 却无效或出现错位

多半不是属性写错了，而是整行的“逻辑列数”未对齐。浏览器只认结构，不猜测你的意图。

• 用开发者工具选中该元素，在「Computed」面板中查看 width 是否明显变宽；如果未变宽，说明被后续单元格挤回去了。
• 手动计算这一行所有 和 的列贡献：未写 colspan 算 1，写了 colspan="2" 算 2，总和必须等于你设计的总列数（比如 5）。
• 检查是否误写成 col-span、colspan="2px" 或 colspan="two" —— 必须是纯数字字符串。

表头用了 colspan 后，tbody 如何正确对应

和 并非独立系统，它们共享同一套列坐标体系。表头合并了几列，数据行就必须按展开后的列数来填充。

• 错误写法：姓名班级（逻辑列数 = 3），接着写 张三李四高三(1)多余（4 个 ）→ 第四列会右推，整行偏移。
• 正确做法：先确定最大逻辑列数（这里是 3），然后每行 的 colspan 值之和必须等于 3。
• 跨 和 的 rowspan 更需谨慎： 意味着 第一行对应列必须留空，不能补 。

colspan 与 CSS width / table-layout 如何配合

单纯使用 colspan 并不能控制宽度，最终表现取决于表格的布局算法。

• 默认 table-layout: auto：宽度由内容撑开，colspan 单元格可能比预期窄或宽。
• 设置 table-layout: fixed：列宽由第一行或 决定，colspan="3" 的宽度等于它所跨三列的宽度之和。
• 给 colspan 单元格单独设置 width，在 fixed 模式下常被忽略；使用百分比时，width: 60% 指的是占整个表格宽的 60%，而不是三列的 60%。

真正棘手的从来不是写对 colspan="2"，而是确保每一行“展开后”的列总数完全一致——人脑很容易漏掉第 3 行少删了一个 。调试时只能靠手动计数，或者用脚本验证：Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)。