colspan="2"不是加宽，而是删除右侧一个；rowspan="2"表示吞掉正下方一个单元格，下一行同列必须留空；二者混用需同步校验每行列总数并彻底清除被覆盖单元格。
colspan="2" 不是“加宽”，而是“删掉右边一个”
很多人以为 colspan="2" 是让单元格变宽，结果在同一行里还照常写满所有 <td>，导致列数爆炸。实际效果是：这个单元格占了本该属于它和它右边紧邻的那个 <code><td> 的位置，所以那个位置必须被跳过。
<ul>
<li>正确写法：<code><tr>
<td colspan="2">标题</td>
<td>姓名</td>
<td>年龄</td>
</tr> → 这行共 4 列（2+1+1）
错误写法：<tr>
<td colspan="2">标题</td>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
</tr> → 实际变成 5 列，下一行若只写 4 个 <td> 就会错位
<li>验证技巧：在浏览器控制台运行 <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，检查每行是否都等于预期列数
colspan 值写错导致不生效的常见原因
colspan 属性看似简单，但值写错时浏览器静默忽略，页面看起来“没反应”，排查成本很高。
-
colspan="2px"、colspan="two"、colspan="undefined" 都无效，单元格只占 1 列
-
colspan="0" 被所有主流浏览器忽略（不是跨到末尾），别用
-
colspan="-1" 或 colspan="1.5" 同样无效，必须是正整数字符串，如 colspan="3"
- JS 拼接时容易漏引号：
`<td colspan="${span}">` 若 <code>span 为 undefined，生成的是 colspan=undefined，失效
table-layout: fixed 下 colspan 单元格的宽度怎么控制？
设了 table-layout: fixed 后，列宽由第一行或 <col> 决定，colspan 单元格的宽度 = 它所跨各列宽度之和——你不能靠给它单独设 width 来改变。
- 想让
colspan="3" 的单元格占满三列总宽，就确保这三列的 <col> 或第一行对应 <th> 宽度已明确（比如 <code><col style="width: 100px">）
-
width: 60% 是相对于整个表格宽度，不是三列之和，可能溢出或挤压其他列
- 响应式场景下，
colspan 不会自动拆分；需要媒体查询重写结构，或 JS 动态替换 DOM
跨列合并后， 和
行数对不上怎么办？
表头用 colspan 合并后，
里的每行仍要按“逻辑列数”来写，不是按视觉列数——这是最易忽略的结构性陷阱。
- 例如：
<thead><tr>
<th colspan="2">用户信息</th>
<th>状态</th>
</tr></thead> → 逻辑列数是 3
- 那么
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>激活</td>
</tr> ✅，不能写成 <code><td>张三</td>
<td>18</td>（只有 2 个 <td>，算作 2 列，错位）
<li>如果 <thead> 用了 <code>rowspan，
第一行对应列也必须留空，否则整列偏移
复杂表头建议先画草图标出每个单元格起始行列和跨度，再编码。浏览器不报错，但错一位，整张表就歪了。
很多人以为 colspan="2" 是让单元格变宽，结果在同一行里还照常写满所有 <td>，导致列数爆炸。实际效果是：这个单元格占了本该属于它和它右边紧邻的那个 <code><td> 的位置，所以那个位置必须被跳过。
<ul>
<li>正确写法：<code><tr>
<td colspan="2">标题</td>
<td>姓名</td>
<td>年龄</td>
</tr> → 这行共 4 列（2+1+1）
<tr>
<td colspan="2">标题</td>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
</tr> → 实际变成 5 列，下一行若只写 4 个 <td> 就会错位
<li>验证技巧：在浏览器控制台运行 <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，检查每行是否都等于预期列数colspan 值写错导致不生效的常见原因
colspan 属性看似简单，但值写错时浏览器静默忽略，页面看起来“没反应”，排查成本很高。
-
colspan="2px"、colspan="two"、colspan="undefined"都无效，单元格只占 1 列 -
colspan="0"被所有主流浏览器忽略（不是跨到末尾），别用 -
colspan="-1"或colspan="1.5"同样无效，必须是正整数字符串，如colspan="3" - JS 拼接时容易漏引号：
`<td colspan="${span}">` 若 <code>span为undefined，生成的是colspan=undefined，失效table-layout: fixed 下 colspan 单元格的宽度怎么控制？
设了
table-layout: fixed后，列宽由第一行或<col>决定，colspan单元格的宽度 = 它所跨各列宽度之和——你不能靠给它单独设width来改变。- 想让
colspan="3"的单元格占满三列总宽，就确保这三列的<col>或第一行对应<th> 宽度已明确（比如 <code><col style="width: 100px">） -
width: 60%是相对于整个表格宽度，不是三列之和，可能溢出或挤压其他列 - 响应式场景下，
colspan不会自动拆分；需要媒体查询重写结构，或 JS 动态替换 DOM - 例如：
<thead><tr> <th colspan="2">用户信息</th> <th>状态</th> </tr></thead>→ 逻辑列数是 3 - 那么
<tbody> <tr> <td>张三</td> <td>18</td> <td>激活</td> </tr> ✅，不能写成 <code><td>张三</td> <td>18</td>（只有 2 个<td>，算作 2 列，错位） <li>如果 <thead> 用了 <code>rowspan， 第一行对应列也必须留空，否则整列偏移 复杂表头建议先画草图标出每个单元格起始行列和跨度，再编码。浏览器不报错，但错一位，整张表就歪了。
跨列合并后， 和 行数对不上怎么办？
表头用
里的每行仍要按“逻辑列数”来写，不是按视觉列数——这是最易忽略的结构性陷阱。colspan合并后， - 想让
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
