colspan 属性让一个 或 占据连续多列的渲染空间，而非真正合并相邻单元格；其值为正整数，表示横向跨越的列数，且每行所有单元格的 colspan（默认为1）之和必须等于表格总列数，否则导致结构错位。
colspan 属性到底合并了什么？
它不是“合并单元格”，而是让一个 <td> 占据连续的多列空间。浏览器不会去“缝合”相邻的 <code><td>，只是让当前单元格渲染宽度变宽，同时跳过后续同位置的列占位 —— 所以必须确保同一行中其他 <code><td> 的列数总和与 <code>colspan 值加起来等于表格总列数，否则会出现错行或对不齐。
常见错误现象：colspan="2" 后紧跟两个普通 <td>，结果整行多出一列，下一行错位；或者表头用了 <code>colspan，但
怎么写才不会让表格结构崩掉？
关键在于列数守恒：每一行所有 <td> 和 <code><th> 的 <code>colspan（默认为 1）之和，必须严格等于该表格设计的总列数。建议先画草图标出每行各单元格的 colspan 值，再写 HTML。
- 如果表格共 4 列，某行第一个
<td colspan="3">，那后面只能跟一个 <code><td>（隐含 <code>colspan="1"），不能跟两个 <th> 同样支持 <code>colspan，表头跨列时，下方<tbody> 每行仍需保持 4 列逻辑宽度，哪怕用多个 <code><td> 拆开填满 <li>避免嵌套 <code>colspan：比如<td colspan="2"><table><tr><td colspan="2">...</td></tr></table></td>，这容易触发渲染歧义，尤其在旧版 IE 或某些邮件客户端中- 用
<col>显式定义每列宽度，例如<col style="width: 120px"> <col style="width: 80px">... - 避免给
colspan单元格设固定width，优先用min-width配合white-space: nowrap控制溢出 - 测试 Safari 和 Outlook（Windows 版）—— 它们对
table-layout: fixed+colspan的解析最不稳定 - 用
<div> + Flex 布局模拟表头分组，保留每个指标独立的 <code><td>，方便排序、筛选、屏幕阅读器识别 <li>若必须用表格结构，可用 <code>aria-colspan辅助说明，但不要依赖它替代真实colspan - 导出 Excel 时，
colspan会被转成合并单元格，但部分库（如 SheetJS）对嵌套或跨行+跨列组合支持弱，容易丢数据
colspan 和 CSS 的 table-layout: fixed 冲突吗？
不直接冲突，但行为会变“硬”。当设置 table { table-layout: fixed; } 后，列宽由第一行（或 <col>）决定，后续行中的 colspan 单元格会强行拉伸到所跨列的累计宽度，但内容可能溢出或换行异常。
使用场景：需要严格控制列宽（如日志表格、报表），此时建议：
替代方案：什么时候不该用 colspan？
当需要“视觉合并”但逻辑上仍是独立数据单元时，colspan 反而破坏语义和可访问性。比如仪表盘中把“CPU 使用率”和“内存使用率”并排显示在同一个标题下，实际却是两个独立指标。
更合适的做法：
真正难的不是写 colspan="2"，而是想清楚这一格在数据模型里到底代表一个值，还是两个值的视觉包装。
