colspan本质是跳过右侧列而非加宽单元格，其值必须为正整数字符串，否则失效；与rowspan共用时需确保跨区域对应位置dom为空，每行总列数须严格一致。
colspan 不是“让单元格变宽”，而是“跳过后面若干列”——写错值、漏算列数、混用 thead/tbody，表格立刻错位。
colspan="2" 到底删掉了哪几个？
它不是加宽当前 <td>，而是告诉浏览器：“这个单元格占两列，后面那一列别再画新单元格了”。相当于逻辑上删除了紧邻右侧的 1 个 <code><td>。
<ul>
<li>如果一行本该有 4 列，你写 <code><td colspan="2">A</td>
<td>B</td>
<td>C</td>，这行实际列数是 2 + 1 + 1 = 4 ✅
但若写成 <td colspan="2">A</td>
<td>B</td>
<td>C</td>
<td>D</td>，就变成 2 + 1 + 1 + 1 = 5 ❌，下一行会整体右移一列
验证方法：在控制台运行 Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，每行结果必须相等
colspan="0" 和 colspan="two" 为什么都不行？
colspan 值必须是正整数字符串，浏览器只认数字字面量。任何非数字内容都会导致该属性被完全忽略，单元格退化为 colspan="1"。
-
colspan="0"：语义上表示“跨到本行末尾”，但所有主流浏览器均不支持，直接失效
-
colspan="two" 或 colspan="2px"：解析失败，等价于没写 colspan
-
colspan=2（不加引号）虽能工作，但在 JS 模板字符串中极易出错，比如 `<td colspan="${span}">` 中 <code>span 为 undefined → colspan="undefined" → 失效
和 rowspan 一起用时，最常漏掉的对齐检查点
二者可共存，但它们各自修改的是不同维度的网格坐标——colspan 影响列计数，rowspan 要求后续行对应列位置彻底留空。最容易翻车的是跨 <thead> 和 <code><tbody> 的场景。
<ul><li>若 <code><th rowspan="2" colspan="3">总览</th> 在 <thead> 最后一行，则 <code><tbody> 的第一行，前 3 列位置必须一个 <code><td> 都不能出现
<li>常见错误：在 <code><tbody> 第一行还写了 <code><td>张三</td>，以为只是数据行——其实它会强行插入到已被 rowspan 占用的位置，导致整行偏移
- 调试建议：用开发者工具选中合并单元格，在 Elements 面板里看它是否真正覆盖了预期行列；再手动展开下一行，确认对应列位置 DOM 节点是否为空
动态生成表格时，colspan 的值一旦来自变量，就必须做非空+数字校验；静态手写则务必每行手算列总数——这是唯一能避开“看起来正常、实际错位”的办法。
它不是加宽当前 <td>，而是告诉浏览器：“这个单元格占两列，后面那一列别再画新单元格了”。相当于逻辑上删除了紧邻右侧的 1 个 <code><td>。
<ul>
<li>如果一行本该有 4 列，你写 <code><td colspan="2">A</td>
<td>B</td>
<td>C</td>，这行实际列数是 2 + 1 + 1 = 4 ✅
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
<td>D</td>，就变成 2 + 1 + 1 + 1 = 5 ❌，下一行会整体右移一列Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，每行结果必须相等colspan="0" 和 colspan="two" 为什么都不行？
colspan 值必须是正整数字符串，浏览器只认数字字面量。任何非数字内容都会导致该属性被完全忽略，单元格退化为 colspan="1"。
-
colspan="0"：语义上表示“跨到本行末尾”，但所有主流浏览器均不支持，直接失效 -
colspan="two"或colspan="2px"：解析失败，等价于没写colspan -
colspan=2（不加引号）虽能工作，但在 JS 模板字符串中极易出错，比如`<td colspan="${span}">` 中 <code>span为undefined→colspan="undefined"→ 失效和 rowspan 一起用时，最常漏掉的对齐检查点
二者可共存，但它们各自修改的是不同维度的网格坐标——
colspan影响列计数，rowspan要求后续行对应列位置彻底留空。最容易翻车的是跨<thead> 和 <code><tbody> 的场景。 <ul><li>若 <code><th rowspan="2" colspan="3">总览</th>在<thead> 最后一行，则 <code><tbody> 的第一行，前 3 列位置必须一个 <code><td> 都不能出现 <li>常见错误：在 <code><tbody> 第一行还写了 <code><td>张三</td>，以为只是数据行——其实它会强行插入到已被rowspan占用的位置，导致整行偏移 - 调试建议：用开发者工具选中合并单元格，在 Elements 面板里看它是否真正覆盖了预期行列；再手动展开下一行，确认对应列位置 DOM 节点是否为空
动态生成表格时，colspan 的值一旦来自变量，就必须做非空+数字校验；静态手写则务必每行手算列总数——这是唯一能避开“看起来正常、实际错位”的办法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
