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

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

在构建分组型数据表格（例如带分类标题的配置项列表、报表明细等）时，常见的需求是：左侧“分类标签”只在首行显示，并纵向跨越其所属的所有数据行——这正是 HTML <td rowspan="N"> 的典型应用场景。但 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 的 <td>
   注意：data.map 在内部循环中需维护 isFirstRow 状态（不可依赖索引比较，因 data 是全量数组，非当前 label 子集）：

<tbody>
  {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 (
          <tr key={`${label}-${idx}`}>
            {shouldRenderLabelCell && (
              <td
                rowSpan={numRows}
                style={{
                  width: '33%',
                  textAlign: 'center',
                  borderRight: '1px solid #E1D9D6',
                  fontSize: '9px',
                  verticalAlign: 'middle', // 垂直居中提升可读性
                }}
              >
                {label}
              </td>
            )}
            <td
              style={{
                width: '50%',
                paddingLeft: '5px',
                fontSize: '9px',
              }}
            >
              {row.key}
            </td>
            <td
              style={{
                borderLeft: '1px solid #E1D9D6',
                width: '50%',
                textAlign: 'right',
                fontSize: '9px',
                paddingRight: '5px',
              }}
            >
              {row.value}
            </td>
          </tr>
        );
      });
  })}
</tbody>

⚠️ 关键注意事项

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

✅ 最终效果对比

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

Sora

Sora是OpenAI发布的一种文生视频AI大模型，可以根据文本指令创建现实和富有想象力的场景。

下载