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

发布日期： 2026-01-21 阅读量： 作者： 心靈之曲

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

` 渲染。

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

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

✅ 正确实现步骤

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

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

渲染逻辑：按标签分组，每组内仅首行渲染带 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 规范，又具备良好的可维护性与扩展性。

上一篇: 如何在隐藏必填字段未填写时将焦点移至自定义可聚焦元素

下一篇: iPhone RCS功能开始收费！

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

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

随便看看

南昌壹佳企网络通信有限公司