colspan="n" 是让单元格占据 n 列位置并跳过后续 n−1 个单元格，需确保每行总列数一致；浏览器按标签结构渲染，不自动修正逻辑列数错位。
colspan="n" 是怎么让单元格占多列的
它不是“拉宽”，而是“占位+跳过”。colspan="3" 表示这个 <td> 或 <code><th> 吃掉自己位置 + 右边两个单元格的位置，后续同级单元格自动右移。浏览器不会帮你删掉多余的 <code><td>，只会按你写的标签逐个渲染。
<ul>
<li>写 <code><td colspan="3">标题</td>
<td>A</td>
<td>B</td> → 这行实际有 5 列（3+1+1）
<td>，不能跟 3 个
<li>
<code>colspan="0" 被所有主流浏览器忽略，别用为什么加了 colspan 却没效果或错位
大概率不是属性写错了，而是整行“逻辑列数”没对齐。浏览器只认结构，不猜意图。
- 用开发者工具选中该元素，在「Computed」里看
width是否明显变宽；没变，说明被后续单元格挤回去了 - 手动算这一行所有
<td> 和 <code><th> 的列贡献：没写 <code>colspan算 1，写了colspan="2"算 2，总和必须等于你设计的总列数（比如 5） - 检查是否误写成
col-span、colspan="2px"或colspan="two"—— 必须是纯数字字符串 - 跨
<thead>/</thead> <tbody> 的 <code>rowspan更要小心：<th rowspan="2"> 意味着 <code><tbody> 第一行对应列必须留空，不能补 <code><td> <h3>colspan 和 CSS width / table-layout 怎么配合</h3> <p>单纯 <code>colspan不控制宽度，最终表现取决于表格布局算法。- 默认
table-layout: auto：宽度由内容撑开，colspan单元格可能比预期窄或宽 - 设了
table-layout: fixed：列宽由第一行或<col>决定，colspan="3"的宽度 = 它所跨三列的宽度之和 - 给
colspan单元格单独设width，在fixed模式下常被忽略；用百分比时，width: 60%是占整个表格宽的 60%，不是三列的 60%
colspan="2"，而是确保每一行“展开后”的列总数完全一致——人脑容易漏算第 3 行少删了一个<td>，调试时得靠手数或用脚本验证：<code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)。 - 默认
表头用了 colspan，tbody 里怎么写才对得上
<thead> 和 <code><tbody> 不是独立系统，它们共享同一套列坐标。表头合并了几列，数据行就得按展开后的列数来填。
<ul><li>错误写法：<code><th colspan="2">姓名</th>
<th>班级</th>（逻辑列数 = 3），接着写 <td>张三</td>
<td>李四</td>
<td>高三(1)</td>
<td>多余</td>（4 个 <td>）→ 第四列会右推，整行偏移
<li>正确做法：先确定最大逻辑列数（这里是 3），然后每行 <code><td> 的 <code>colspan 值之和必须等于 3
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
