colspan="2"本身不会导致错位，错位源于该行所有单元格colspan总和不等于表格总列数，例如4列表格中写<td colspan="2"></td>后又跟3个普通<td>，总列数变为5，破坏结构守恒。
colspan="2" 为什么表格错位了
错位不是 colspan 本身的问题，而是同一行中所有单元格的列数总和不等于设计列数。比如表格本该是 4 列，你写了一个 <td colspan="2">，后面却跟了三个普通 <td>（各占 1 列），那这行实际占了 5 列，浏览器会强行撑开或补空单元格，下一行就对不上。
关键守恒律：每行所有 <td> 和 <th> 的 colspan 值加起来，必须严格等于该表格的总列数。默认每个单元格 colspan="1"。
- 先画草图，标出每行每个单元格的
colspan值，再写 HTML - 表头用了
colspan="3"？那<tbody>每行也得凑够 3 列逻辑宽度——可以是一个<td colspan="3">，也可以是三个<td> - 避免在同一个
<td>里嵌套另一个带colspan的表格，旧版 Outlook 和 Safari 容易解析失败
colspan 和 table-layout: fixed 一起用会怎样
不报错，但行为变“硬”：列宽由第一行或 <col> 决定，colspan 单元格会被强制拉伸到所跨列的累计宽度，内容可能溢出、换行异常，甚至文字被截断。
如果你真要用 table { table-layout: fixed; }，建议：
- 用
<col>显式定义每列宽度，例如<col style="width: 120px"><col style="width: 80px"> - 别给
colspan单元格设width，改用min-width+white-space: nowrap控制溢出 - 务必在 Safari 和 Outlook（Windows 版）里实测——它们对这种组合的支持最不稳定
rowspan 和 colspan 能不能混用
能，但顺序很重要：先按 rowspan 确定行结构，再在剩余列位置上填 colspan 或普通单元格。
比如一个单元格要 rowspan="2" colspan="2"，它所在行的后一列就不能再出现 <td>（已被跨列覆盖），下一行对应前两列的位置也必须留空（已被跨行覆盖）。
- 动态生成时，
rowspan的值得提前算好——统计相同值连续出现的行数，只在首行写rowspan，其余行对应列直接 omit - JS 修改
rowspan后，DOM 不会自动删掉被跨过的<td>，得手动移除，否则显示重复 -
<th>用colspan时，记得配scope="col"，不然屏幕阅读器无法关联下方数据单元格
什么时候不该用 colspan
当“看起来合并”但逻辑上需要独立语义时，colspan 反而有害。比如仪表盘里把“CPU 使用率”和“内存使用率”放在同一个表头下展示，它们其实是两个独立指标，各自有单位、更新频率、告警逻辑。
这时用 colspan 会让表格结构失真，排序、筛选、导出 CSV 都难处理，屏幕阅读器也会读错关系。
- 更稳妥的做法：用
<div>+ Flex 布局模拟分组标题，每个指标仍保持独立的<td> - 如果必须用表格语义，至少保留每个指标的
<th>，用 CSS 视觉对齐，而不是靠colspan拼合 - 邮件模板里慎用
colspan—— Outlook for Windows 对复杂跨列支持极差，常渲染成空白或错列
