rowspan是HTML中用于纵向合并单元格的属性，本质是当前单元格覆盖正下方指定数量的原始格子，值必须为正整数，且被覆盖行对应列须跳过td/th，否则导致表格结构错乱。

HTML 表格合并行，只靠 rowspan，没有别的捷径；但写错一行，整张表就错位——浏览器不报错，只默默渲染出奇怪的空白或重叠。

rowspan 是什么，又不是什么

rowspan 不是“让这个单元格变高”，而是“这个单元格要覆盖掉它正下方的若干个格子”。值为 2，表示它和下一行同列位置的那个 原本该存在的位置，现在被它“吃掉了”。

• 必须是纯正整数，rowspan="2" 合法，rowspan="2px" 或 rowspan="two" 无效，浏览器直接忽略
• 它只作用于当前 所在的行及其后续行，不会跨 / 分组生效
• 如果 姓名 在第一行，第二、第三行同一列**绝对不能出现任何 或 **，否则会被当成新列，列数膨胀

  合并相同内容的行，关键在结构预判

  比如要把“语文”这个科目名对齐三行学生成绩，不能靠 JS 扫描后动态加 rowspan，得从写 HTML 的第一行就开始规划网格。

  • 先画草图：标出哪几行属于同一组，哪一列是固定标签（如“语文”“数学”），哪几列是变动数据
  • 固定标签列用 rowspan，数据列按行平铺，不补空、不跳列
  • 常见错误：在第二行对应列写了 ，以为“留个空位”，结果表格多出一列，右侧全偏移
  • 验证方法：用 document.querySelectorAll('tr')[0].children.length 和 document.querySelectorAll('tr')[1].children.length 对比，若不等，说明结构已错

  和 colspan 混用时，最容易漏掉的约束

  当一个单元格既要跨 2 行又要跨 3 列（即 rowspan="2" colspan="3"），它实际占用了 2×3=6 个原始格子。周围所有行、列都得按这个“吞掉”的数量做减法。

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  • 该单元格所在行，其他单元格的 colspan 总和 + 3 必须等于总列数（例如总列数为 5，则其余单元格 colspan 总和只能是 2）
  • 下一行中，该单元格覆盖的 3 列位置全部留空，不能写 ，也不能用 （无效）
  • 如果表格有 和 ，确保两部分展开后的逻辑列数一致；否则 border-collapse: collapse 下边框会断开
  • 别指望用 rowspan 实现“左侧固定 + 右侧滚动”效果——这种需求应改用 position: sticky 或 CSS Grid

  为什么开发者工具看不出问题

  浏览器解析 rowspan 时不会抛错，DOM 树里也照常存在所有节点，但 getBoundingClientRect() 返回的宽度/高度可能异常，querySelector('td:nth-child(3)') 会选错目标——因为“第 3 列”在合并后已不存在。

  • 真正可靠的检查方式是：遍历每行，用 Array.from(tr.children).reduce((sum, el) => sum + (el.colSpan || 1), 0) 算出该行逻辑列总数，所有行必须相等
  • 响应式场景下更危险：colspan="4" 在小屏可能撑破容器，但浏览器仍静默渲染；建议配合 table-layout: fixed 和 width 控制
  • 无障碍访问依赖正确结构：屏幕阅读器靠 rowspan 推断语义关系，填错值会导致“科目：语文，学生：张三，学生：李四，学生：王五”读成四条独立条目

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