colspan="n" 是单元格横向跨列的逻辑占位，非视觉加宽；其值必须为正整数，整行所有单元格的 colspan 值之和须严格等于表格总列数，否则导致 dom 结构失真、边框断裂或渲染错位。
colspan="n" 是占位，不是加宽
写 colspan="2" 不会让单元格“变宽”，而是让这个 <td> 或 <code><th> 向右连续占据 2 列位置。整行所有单元格的 <code>colspan 值加起来必须等于表格总列数（通常由第一行 <th> 数量决定）。浏览器靠这个总和对齐列坐标，错一点就裂。
<ul>
<li>
<code>colspan="2px 或 colspan="two" —— 浏览器直接忽略，当没写
<th colspan="2">A</th>
<th>B</th>
<th>C</th>
<th>D</th> → 总和是 5，浏览器会丢弃最后一个或补空，DOM 已失真<td colspan="2">汇总</td>
<td>时间</td> 这行只有 2 个元素，但逻辑列数是 3，后续行也得按 3 列对齐横向合并相邻两列必须删掉右边那个
合并 A 和 B，只在 A 上加 colspan="2"，B 的 <td> 必须彻底删除——不能留空 <code><td></td>，也不能用注释占位。否则它仍算一个单元格，导致该行列数溢出。
- 正确：
<tr>
<td colspan="2">A+B</td>
<td>C</td>
</tr>（假设共 3 列）
- 错误：
<tr>
<td colspan="2">A+B</td>
<td></td>
<td>C</td>
</tr> → 多了一个空 <td>，实际渲染成 4 列
<li>React/Vue 中别用 <code>v-if 或 {show && <td>} 隐藏右侧单元格——隐藏 ≠ 删除，DOM 里还在
<h3>colspan 总和不对会导致边框断裂、文字挤在一起</h3>
<p>最常见报错是控制台提示 <code>Table row has fewer cells than required，或者 DevTools 里看到某行突然变短、边框断开。这基本就是某行 colspan 加起来不等于表头列数。
anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
- 验证方法：在 Chrome DevTools Elements 面板中右键表格 → “Edit as HTML”，临时删掉可疑
<td> 看是否恢复整齐
<li>逐行手动加总：<code>Array.from(row.cells).reduce((sum, cell) => sum + (parseInt(cell.colSpan) || 1), 0)
- 注意：
colspan="1" 可省略，但显式写出更利于排查；colspan="0" 在 HTML5 中无效，会被忽略
复杂点在于，colspan 不是独立生效的样式开关，它改写的是表格的逻辑结构。写错一个值，row.cells[0] 可能返回 undefined，打印 PDF 时列会错位，但控制台什么也不提示。
合并 A 和 B，只在 A 上加 colspan="2"，B 的 <td> 必须彻底删除——不能留空 <code><td></td>，也不能用注释占位。否则它仍算一个单元格，导致该行列数溢出。
- 正确：
<tr> <td colspan="2">A+B</td> <td>C</td> </tr>（假设共 3 列） - 错误：
<tr> <td colspan="2">A+B</td> <td></td> <td>C</td> </tr>→ 多了一个空<td>，实际渲染成 4 列 <li>React/Vue 中别用 <code>v-if或{show && <td>} 隐藏右侧单元格——隐藏 ≠ 删除，DOM 里还在 <h3>colspan 总和不对会导致边框断裂、文字挤在一起</h3> <p>最常见报错是控制台提示 <code>Table row has fewer cells than required，或者 DevTools 里看到某行突然变短、边框断开。这基本就是某行colspan加起来不等于表头列数。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 验证方法：在 Chrome DevTools Elements 面板中右键表格 → “Edit as HTML”，临时删掉可疑
<td> 看是否恢复整齐 <li>逐行手动加总：<code>Array.from(row.cells).reduce((sum, cell) => sum + (parseInt(cell.colSpan) || 1), 0) - 注意：
colspan="1"可省略，但显式写出更利于排查；colspan="0"在 HTML5 中无效，会被忽略
复杂点在于，
colspan不是独立生效的样式开关，它改写的是表格的逻辑结构。写错一个值，row.cells[0]可能返回undefined，打印 PDF 时列会错位，但控制台什么也不提示。 - 验证方法：在 Chrome DevTools Elements 面板中右键表格 → “Edit as HTML”，临时删掉可疑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
