rowspan是结构声明而非视觉拉伸，必须写在起始td中且后续行对应列彻底省略td/th；跨thead/tbody无效，需用单tbody或grid模拟；动态生成时须按分组预处理行数。

rowspan 不是视觉拉伸工具，而是结构声明：它告诉浏览器“从此单元格起，向下跳过 N−1 行的同一列位置”。写错位置、漏删单元格、混用 thead/tbody，都会让跨行失效或错位。

rowspan 必须写在起始 里，且后续行对应列必须彻底省略

浏览器按源码逐行解析，rowspan="3" 的效果只在它所在的那个 标签上生效，不会“传染”给下面的行。关键约束是：接下来的 2 行（即第 2、3 行）中，**该列位置不能出现任何 或 ** —— 不是留空，是彻底不写。

• ✅ 正确： 配置项 开关 启用 禁用
• ❌ 错误： 配置项 开关 启用 （这里多写了第一个 ） → 浏览器自动补空单元格，rowspan 在第 2 行就中断
• 调试建议：用开发者工具选中该 ，看 Elements 面板里是否包裹了下方多行区域；不要数源码里的 个数，要看渲染后实际单元格分布

  跨行 + 跨列同时使用时，列总数必须严格对齐

  rowspan 和 colspan 可以共存，比如 汇总，但它覆盖的 2×3=6 个逻辑格子，在后续行中都不得再出现占位单元格。一旦某行列数算错，整行会偏移。

  • 常见陷阱：第一行有 A B（共 4 列宽），第二行却只写 C D（仅 2 个 ）→ 浏览器自动补两个空 ，但它们不参与 rowspan 计算，导致视觉列头错位
  • 安全做法：先手绘网格草图，标出每行每个 的 rowspan/colspan 值，再写代码；用固定宽度和短文本验证结构稳固后再加样式
  • 注意：colspan 改变的是当前行宽度，rowspan 影响的是后续行的列占用——两者作用方向不同，但最终都归结为“每行有效列数是否一致”

  动态生成（如 React/Vue）时，rowspan 不能靠索引判断是否首行

  在框架中遍历数据时，data.map((item, i) => ...) 的 i 是全局索引，不是分组内局部索引。直接写 i === 0 ? rowspan={n} : null 会失败，因为分组首行未必是数组第 0 项。

  
  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
  下载
  • 正确预处理：用 reduce 统计每组行数，例如 const numRowsByLabel = data.reduce((acc, row) => { acc[row.label] = (acc[row.label] || 0) + 1; return acc; }, {});
  • 渲染逻辑：外层按唯一 label 列表循环，内层过滤出该组数据，再对过滤后数组的 index === 0 位置设置 rowspan，其余行跳过该列渲染
  • 典型错误：在 map 内部用闭包缓存上一行 label 并比较，容易因异步更新或重渲染导致状态污染

  跨 thead 和 tbody 区域的 rowspan 不被 HTML 规范支持

  如果把 分类 放在 ，但想让它跨到 的行，浏览器会忽略 rowspan 或渲染错乱。这不是 bug，是规范限制：rowspan 不能跨越语义区块边界。

  • 兼容方案一：放弃 / 分区，整个表格用单个 ，用 CSS 类区分表头样式（如 .table-header）
  • 兼容方案二：改用 display: grid 或 display: flex 模拟表格外观，配合 ARIA 属性（如 role="table"）维持可访问性
  • 重要提醒：即使视觉上看起来成功，屏幕阅读器可能无法正确播报跨区域单元格归属，影响无障碍体验

  最易被忽略的是列宽传导效应：rowspan 单元格所在列的宽度，会强制整列所有行按该宽度布局。如果其他行该列内容很长，或用了 white-space: nowrap，就会把跨行结构“撑歪”。动手前务必用固定宽度和简短文本验证结构是否真正稳固。

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