colspan和rowspan是唯一标准、语义正确且兼容稳定的表格合并方案；必须确保每行逻辑列数恒定，跨行跨列时手动删除被占位置的单元格，否则导致结构错乱、屏幕阅读器失效及打印异常。

colspan

和 rowspan 是唯一标准、语义正确且浏览器兼容性稳定的方案；别用 CSS Grid 或 JS 模拟“合并”，那不是真合并，屏幕阅读器读不到，打印也错位。

colspan="n" 怎么写才不导致右侧多出一列

本质是：这个单元格向右占了 n 个逻辑列位置，它右边原本该有的 n−1 个 必须删掉。

• 错误写法： 标题 A B （共 4 列逻辑，但只声明了 3 个单元格，其中 1 个占 2 列 → 实际列数 = 2 + 1 + 1 = 4，看似对？但下一行若写 4 个 就超了）
• 正确做法：先确定整表“最大逻辑列数”，比如 4 列 → 每行所有 colspan 值加起来必须恒等于 4
• colspan 值只能是正整数，colspan="2px"、colspan="two"、colspan="0" 全部无效，浏览器静默忽略
• 常见症状：Table row has fewer cells than required 控制台警告，或边框断裂、文字挤成一团

rowspan="m" 为什么下面几行总多出空白列

因为浏览器不会自动“跳过”被跨占的列位置——你得手动删掉那些位置上的 或 。

• 如果 科目 在第 1 行第 1 列，那么第 2 行和第 3 行的第 1 列位置，不能出现任何单元格标签
• 写了就等于新增一列：浏览器把那个多余的 当作新列渲染，整行右移，后续列全错位
• 验证方法：document.querySelectorAll('tr')[0].children.length 和 document.querySelectorAll('tr')[1].children.length 对比，不等就说明结构崩了
• 嵌套在 / 里时，两部分展开后的逻辑列数必须一致，否则 border-collapse: collapse 下边框会断开

  colspan 和 rowspan 能不能一起用

  能，但约束陡增：一个单元格同时设 rowspan="2" 和 colspan="3"，它实际吞掉 2×3=6 个原始格子，周围所有行/列都得按这个“吞掉量”做减法。

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
  • 该单元格所在行：其余单元格的 colspan 总和 + 3 必须等于总列数（例如总列数为 5，则其余 colspan 和只能是 2）
  • 下一行中：它覆盖的 3 列位置全部留空，不能写 ，也不能用 colspan="0"（无效）
  • 最易漏点： 用了 colspan 合并表头， 却没按展开后列数对齐数据列，导致语义错乱、辅助技术失效
  • 复杂结构建议先画网格草图，标出每行每列的“是否被占”，再填内容，别边写边猜
  真正难的不是属性怎么写，而是你得在写第一行之前，就清楚整张表所有行列的“逻辑占位关系”。浏览器不校验结构，只按你写的标签硬渲染——错一位，整张表就偏。

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