colspan的作用是声明单元格向右占据连续n列的逻辑位置，非样式控制；其值必须使每行所有单元格colspan总和严格等于表格总列数（通常由第一行th数量决定），算错将导致结构错乱、JS读取异常或导出错位。
colspan 的作用不是“让单元格看起来更宽”，而是明确告诉浏览器：“这个 <td> 或 <code><th> 要占据它右边连续 <code>n 列的位置”——错算一列，整行结构就塌。
colspan="2" 是怎么算出来的？看整行所有单元格的 colspan 总和
表格的列数基准由第一行决定（通常是 <th> 数量），后续每行所有 <code>td 和 th 的 colspan 值加起来，必须严格等于该基准数。比如第一行有 6 个 <th>，那第二行写 <code><td colspan="3"></td>
<td colspan="2"></td> 就错了——总和是 5，缺 1 列，浏览器会自动补一个空 <td>，但 JS 里 <code>row.cells.length 可能返回 4 而不是 3，导出 Excel 时也容易错位。
常见错误现象：
- 表格在 Chrome 看正常，但用 Puppeteer 截图时右侧内容被截断
- React 渲染后
useEffect读row.cells返回undefined - 屏幕阅读器把表头和数据行关联错，读成“姓名：年龄”，实际是“姓名：城市”
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手写 HTML 表格时，先写好第一行，记下
th个数；再逐行检查每行colspan总和是否匹配 - 用
document.querySelectorAll('tr').forEach(r => console.log(r.cells.length))快速验证每行真实单元格数 - 避免动态拼接
colspan字符串，改用模板字符串 + 显式计算：比如colspan="${6 - usedCols}"，并确保usedCols是运行时累计值
colspan="0" 在所有主流浏览器中都不起作用
虽然 HTML 规范里定义了 colspan="0" 表示“跨到列组末尾”，但现实是：Chrome、Firefox、Safari、Edge 全部忽略它，当成 colspan="1" 处理。你写 <td colspan="0">标题</td>，它不会自动撑满剩余列，也不会报错，只是安静地当普通单元格用。
使用场景：
- 服务端生成表格时想“自动填满”，别用
0，改用显式计算剩余列数 - 从旧系统迁移代码，发现
colspan="0"没效果，不是你配置错，是浏览器根本没实现
性能影响：无。但它会让维护者误以为“这里本应自动扩展”，埋下逻辑隐患。
React/Vue 中动态设置 colspan 容易漏掉 key 或重渲染边界
在 JSX 或 Vue 模板里写 <td :colspan="item.span">{{ item.text }}</td> 很自然，但问题常出在两处：一是 key 没绑定到包含 colspan 变化的粒度上；二是父组件重渲染时，item.span 改了但 DOM 没更新——因为 Vue 的响应式追踪可能没覆盖到嵌套对象的属性变更，React 的 useState 若直接 mutate 数组元素也不会触发更新。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<td> 加 <code>key，且 key 要包含colspan值，比如:key="`cell-${index}-${item.span}`" - Vue 中用
computed重新生成带colspan的 cell 列表，避免直接依赖原始数组字段 - React 中确保
colspan来自新对象或新数组，不要arr[i].span = 3，而要setCells(prev => prev.map((c, j) => j === i ? {...c, span: 3} : c)) - 先在 DevTools 里禁用所有 CSS，看原生 HTML 是否对齐
- 检查是否用了
white-space: nowrap却没限制容器宽度，撑爆了列宽分配 - 导出库（如 SheetJS）默认按
row.cells.length拆列，若你靠 JS 动态删/增td而没同步更新colspan，它就会漏数据
打印 PDF 或导出 Excel 时 colspan 错位，往往不是 colspan 写错了
真正的问题常在 CSS：比如用了 table-layout: fixed 但没设 width，或者单元格内文字过长触发换行，导致浏览器渲染宽度和打印引擎计算宽度不一致。这时 colspan 本身没错，但视觉上像“没合并上”。
排查顺序：
最容易被忽略的一点：服务器端渲染（SSR）时，colspan 值来自初始数据，但客户端 hydration 后状态变了，DOM 没同步更新——这种错位只在首屏出现，复现困难，但只要检查 SSR 输出的 HTML 和客户端最终 DOM 的 colspan 属性是否一致，就能定位。
