结论：使用colspan属性时必须保证每行逻辑列数一致，否则导致表格结构错乱；colspan="n"表示该单元格占据n列位置，整行所有单元格的colspan值之和必须恒定，混用rowspan时需预留对应空白单元格。
直接说结论：用 colspan 属性，但必须确保每行的“逻辑列数”一致，否则表格会错位、多出空白列、表头和数据对不上——这不是样式问题，是结构崩坏。
colspan="n" 是怎么吃掉右边 n−1 列的
它不是“加宽”，而是“占位”。colspan="3" 表示这个单元格横跨 3 列，相当于它自己顶替了原本该位置 + 右边两个单元格的位置。
- 如果一行只有
<td colspan="3">标题</td>，那这行逻辑上就是 3 列宽 - 下一行就得提供总共 3 个单元格（比如
<td>A</td> <td>B</td> <td>C</td>，或<td>A</td> <td colspan="2">B+C</td>） - 如果下一行写了 4 个
<td>，浏览器就会渲染成 4 列，导致整行右移、对不齐 <h3>为什么表头合并后，下面数据列总是偏移或空一列</h3> <p>本质是没算清“这一行该有几个单元格”。常见错误是只改了表头，忘了同步调整数据行的单元格数量。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>错误写法：<code><th colspan="2">姓名/学号</th> <th>班级</th>→ 这行逻辑列数 = 3
但接着写：<td>张三</td> <td>2021001</td> <td>高一(3)班</td> <td>额外多出的</td>→ 实际渲染 4 列，错位 - 正确做法：先确定最大逻辑列数（这里是 3），然后每一行的
<td>/<code><th> 的 <code>colspan值加起来必须等于 3 - 检查技巧：把所有
colspan值展开成 1 列/个，数总数。例如colspan="2"算 2 个，colspan="1"算 1 个，总和必须恒定 - 若某单元格同时设
rowspan="2" colspan="2"，它占据左上角 2×2 区域；那么第 2 行的前两列位置都必须留空（不能写任何<td>） <li>很多人只删了第 2 行第 1 列的 <code><td>，却在第 2 行第 2 列又写了一个，结果多出一列 <li>复杂结构务必先画网格草图：标出每个单元格起始坐标、<code>rowspan和colspan值，再逐行填标签 - 浏览器开发者工具里看
Elements面板，如果看到某行<tr> 下的 <code><td> 数量明显多于其他行，基本就是没对齐逻辑列数 <p>真正难的不是写对属性，而是让所有行在“展开后”列数完全一致——人脑容易漏算，建议用纸笔先画格子，不然调半天才发现是第二行少删了一个 <code><td>。</td>
colspan 和 rowspan 混用时最易踩的坑
两者可共存，但 rowspan 会强制你“跳过后续行对应列”，而 colspan 只影响当前行——这个不对称性极易引发混乱。
立即学习“前端免费学习笔记（深入）”；
