如何在 HTML 表格中实现跨行（rowSpan）的表头单元格 返回列表

本文详解如何通过 `rowspan` 属性让表格左侧的分类标签（如 label 1、label 2）垂直跨多行显示，避免重复渲染，匹配真实数据分组结构。核心在于预统计每组标签的行数，并在首次出现时设置 `rowspan`，后续同组行跳过该 `

` 渲染。

在构建分组型数据表格（例如带分类标题的配置项列表、报表明细等）时，常见的需求是：左侧“分类标签”只在首行显示，并纵向跨越其所属的所有数据行——这正是 HTML

的典型应用场景。但 React 中动态计算 rowSpan 容易出错，关键在于不能边遍历边判断“是否合并”，而必须提前统计每组数据的行数，并在渲染时精准控制单元格的生成时机。

✅ 正确实现步骤

1. 预处理：统计每组标签对应的数据行数
   使用 reduce 遍历原始数据，构建映射对象 { 'LABEL 1': 2, 'LABEL 2': 1 }：

const numRowsByLabel = data.reduce((acc, row) => {
  acc[row.rowLabel] = (acc[row.rowLabel] || 0) + 1;
  return acc;
}, {});

2. 渲染逻辑：按标签分组，每组内仅首行渲染带 rowSpan 的
   注意：data.map 在内部循环中需维护 isFirstRow 状态（不可依赖索引比较，因 data 是全量数组，非当前 label 子集）：

   
     {labels.map((label) => {
       let isFirstRow = true; // 每个 label 组独立重置
       return data
         .filter(row => row.rowLabel === label) // 先过滤出本组数据（更清晰）
         .map((row, idx) => {
           const numRows = numRowsByLabel[label];
           const shouldRenderLabelCell = isFirstRow;
           isFirstRow = false;
   
           return (
       
         
               {shouldRenderLabelCell && (
                 
                   {label}
                 
               )}
               
                 {row.key}
               
               
                 {row.value}
               
             
           );
         });
     })}
   

   ⚠️ 关键注意事项

   • key 必须唯一且稳定：推荐用 label + index（如 ${label}-${idx}），避免仅用 index 导致重排错乱。
   • 不要在 内嵌套 ：你原代码中 ... 是非法 HTML，浏览器会自动修正，引发不可预测布局问题。所有 必须直接作为 的子元素。
   • rowSpan 值必须准确：若某组实际有 3 行但 rowSpan="2"，会导致下一行被覆盖或错位；务必确保统计逻辑与最终渲染数据完全一致（建议优先用 .filter().map() 替代条件返回 null 的写法，逻辑更直观）。
   • 样式兼容性：rowSpan 单元格的 vertical-align: middle 可显著改善视觉对齐效果，尤其当同行其他单元格内容高度不一时。

   ✅ 最终效果对比

   ❌ 错误效果（重复标签）	✅ 正确效果（跨行标签）
   | LABEL 1 | 1 |	| LABEL 1 | 1 |
   | LABEL 2 | 2 |	| | 2 |
   | LABEL 2 | 3 |	| LABEL 2 | 3 |

   通过以上方法，你就能优雅地实现专业级分组表格——既符合语义化 HTML 规范，又具备良好的可维护性与扩展性。