结论：使用colspan属性时必须保证每行逻辑列数一致，否则导致表格结构错乱；colspan="n"表示该单元格占据n列位置，整行所有单元格的colspan值之和必须恒定，混用rowspan时需预留对应空白单元格。

直接说结论：用 colspan 属性，但必须确保每行的“逻辑列数”一致，否则表格会错位、多出空白列、表头和数据对不上——这不是样式问题，是结构崩坏。

colspan="n" 是怎么吃掉右边 n−1 列的

它不是“加宽”，而是“占位”。colspan="3" 表示这个单元格横跨 3 列，相当于它自己顶替了原本该位置 + 右边两个单元格的位置。

• 如果一行只有 标题，那这行逻辑上就是 3 列宽
• 下一行就得提供总共 3 个单元格（比如 A B C，或 A B+C）
• 如果下一行写了 4 个 ，浏览器就会渲染成 4 列，导致整行右移、对不齐

  为什么表头合并后，下面数据列总是偏移或空一列

  本质是没算清“这一行该有几个单元格”。常见错误是只改了表头，忘了同步调整数据行的单元格数量。

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
  • 错误写法：姓名/学号 班级 → 这行逻辑列数 = 3
    但接着写：张三 2021001 高一(3)班 额外多出的 → 实际渲染 4 列，错位
  • 正确做法：先确定最大逻辑列数（这里是 3），然后每一行的 / 的 colspan 值加起来必须等于 3
  • 检查技巧：把所有 colspan 值展开成 1 列/个，数总数。例如 colspan="2" 算 2 个，colspan="1" 算 1 个，总和必须恒定

  colspan 和 rowspan 混用时最易踩的坑

  两者可共存，但 rowspan 会强制你“跳过后续行对应列”，而 colspan 只影响当前行——这个不对称性极易引发混乱。

  • 若某单元格同时设 rowspan="2" colspan="2"，它占据左上角 2×2 区域；那么第 2 行的前两列位置都必须留空（不能写任何 ）
  • 很多人只删了第 2 行第 1 列的 ，却在第 2 行第 2 列又写了一个，结果多出一列
  • 复杂结构务必先画网格草图：标出每个单元格起始坐标、rowspan 和 colspan 值，再逐行填标签
  • 浏览器开发者工具里看 Elements 面板，如果看到某行 下的 数量明显多于其他行，基本就是没对齐逻辑列数

    真正难的不是写对属性，而是让所有行在“展开后”列数完全一致——人脑容易漏算，建议用纸笔先画格子，不然调半天才发现是第二行少删了一个 。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！