colspan="n"本质是删除右侧n−1个单元格，非加宽；每行真实列数必须一致，否则错位；table-layout:fixed下宽度由所跨列宽之和决定，单独设width常被忽略。
colspan="n" 不是加宽，是“删掉右边 n−1 个单元格”
很多人写 colspan="3" 后，还在同一行里继续写三个 <td>，结果整行变成 4 列（3+1），下一行立刻错位。浏览器不会自动跳过——它只按你写的标签逐列排布。
<ul><li>若某行总列数应为 5，你在第一个 <code><td> 上写 <code>colspan="3"，那这一行后续只能再写 2 个 <td>（不是 4 个）
<li>
<code>colspan="0" 无效，会被浏览器忽略；colspan="1" 可省略，不写就是默认值
<tr>
<td colspan="3">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr> → 实际占 5 列，但第 4 个 <td> 挤到第 5 列，导致下一行对不齐
<h3>每行“真实列数”必须一致，否则表格视觉错位</h3>
<p>HTML 表格要求每行的总列数（含所有 <code>colspan 贡献）逻辑一致。错位不是 colspan 本身的问题，而是没同步调整同行其他单元格数量。
- 验证方法：用
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)计算每行真实列数，确保所有<tr> 结果相同 <li>手写时建议对每行做列数累加：把所有 <code>colspan值和普通单元格数相加，总数必须等于表头定义的列数（比如表头有 4 列，那每行都得是 4） - 特别注意：
<thead> 中用了 <code>colspan，<tbody> 的每一行也必须按展开后的列数写单元格，不能按“看起来有几个 <code><th>”来数 <h3>table-layout: fixed 下，colspan 单元格宽度由列宽之和决定</h3> <p>单纯设 <code>colspan不控制具体宽度，最终渲染取决于表格布局算法。一旦设置table-layout: fixed，列宽由第一行或<col>决定，此时colspan="3"的单元格宽度 = 它所跨的三列宽度之和。- 给
colspan单元格单独设width，在table-layout: fixed下常被忽略 - 用百分比时：
width: 60%表示占整个表格宽度的 60%，不是“占三列的 60%”，可能溢出或挤压其他列 -
colspan是静态声明，不会随屏幕缩放“智能拆分”，响应式场景需配合媒体查询或 JS 动态重绘
多层表头中 colspan 必须和 rowspan 配合，否则无法构建二维结构
仅靠
colspan只能做单层横向合并。要实现“大类→子类”的两级表头，必须用rowspan控制纵向占位，否则第二行会错位或撑开空白行。立即学习“前端免费学习笔记（深入）”；
- 典型反例：
<thead> <tr><th colspan="3">产品类别</th></tr> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> </thead>✅ 正确；但如果第一行还加了rowspan="2"，第二行对应位置就必须留空 <thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐：如果 <code><thead> 里某列被 <code>rowspan占用，<tbody> 第一行对应列也必须跳过 <li>复杂合并前务必画草图标出每个单元格起始行列和跨度，别靠脑子硬算——二维网格坐标一错，整张表就偏移</li> 实际写的时候，最容易被忽略的是 <code><thead> 和 <code><tbody> 之间列数的隐式脱节，以及 <code>table-layout: fixed下对width的预期偏差。这两个点不提前校验，调试起来非常耗时。
- 给
