colspan 是让当前单元格向右占据指定列数，需手动删除其右侧对应数量的单元格；浏览器跳过被占位置，视觉上“合并”但 DOM 中仍为单个 <td>。
colspan 是什么，它到底在合并谁？
colspan 不是“把两个 <td> 合成一个”，而是让当前单元格向右占满指定列数，同时你必须手动删掉它右边那些本该存在的单元格。浏览器渲染时会跳过被占据的位置，视觉上像“合并”了——但 DOM 里始终只有一个 <td> 元素。
常见错误现象：Table row has fewer cells than required、某行突然变短、边框错位、文字挤成一团。
-
colspan="1"是默认值，可省略 -
colspan="0"在 HTML5 中无效，会被忽略 - 数值必须是正整数，不能是小数或负数
- 如果表头定义了 4 列（比如
<th></th><th></th><th></th><th></th>），那每一行所有colspan值加起来必须等于 4
怎么写才不会让表格结构崩掉？
关键在于“删对位置”。横向合并时，要删的是当前单元格**右侧连续的单元格**，不是随便删。
比如你想让第一列跨两列：
立即学习“前端免费学习笔记（深入）”；
<tr> <td colspan="2">标题</td> <td>第三列</td> <td>第四列</td> </tr>
上面这行共 4 列（colspan="2" 占两列 + 后面两个 <td> 各占一列 = 4）。如果你多写一个 <td>：
<tr> <td colspan="2">标题</td> <td>第三列</td> <td>第四列</td> <td>第五列</td> <!-- 多了！这一行就变成 5 列 --> </tr>
整行就会撑开，破坏对齐。
- 用 Chrome DevTools 的 Elements 面板右键表格 → “Edit as HTML”，临时删掉可疑
<td>看是否恢复整齐 - 检查每行的列总数：把所有
colspan值加起来，再加未设colspan的单元格数，结果必须一致 - 不要在同一个
<tr>里混用colspan和rowspan—— 容易误判逻辑行列位置
colspan 和 rowspan 能一起用吗？
能，但必须小心计算“逻辑行列坐标”。一个单元格同时设 colspan="2" 和 rowspan="3"，意味着它要占据右 1 列 + 下 2 行的全部位置，总共覆盖 2×3=6 个逻辑格子。
这时候你要确保：它所在行右侧少写 1 个 <td>；它下方两行中，对应列位置都得空着（不能出现任何 <td> 或 <th>）。
- 先处理
rowspan：找到最上方的目标单元格，设好值，然后删掉它正下方所有同列的单元格 - 再处理
colspan：在同一行内，从左到右确认哪些位置已被占用，避免重复写 - 复杂表格建议画草图标出每个单元格的行列坐标，再反推哪些
<td>必须删掉
容易被忽略的兼容性细节
colspan 本身兼容性极好（IE6+ 都支持），但问题常出在样式叠加和响应式断点上。
- CSS 中
width: 100%或table-layout: fixed会影响colspan单元格的实际宽度分配，建议用min-width控制最小可视宽度 - 移动端小屏下，大
colspan可能导致内容溢出或换行异常，可用white-space: normal强制换行 - 辅助工具（如屏幕阅读器）会按逻辑行列读取，
colspan="2"的单元格会被读作“跨两列的标题”，所以语义要清晰，别用它藏关键信息
真正难的不是写 colspan，而是删对那个该删的 <td> —— 多数错位问题，根源都在这里。
