网页怎样实现行合并表格？Td标签Rowspan属性跨行合并

rowspan属性需设为正整数，且后续行对应列位置必须省略td/th标签；否则会导致错位、遮盖或渲染异常。

rowspan 属性怎么写才生效

必须确保 td 或 th 元素的 rowspan 值是正整数，且该单元格所在行后续对应列位置的单元格要「留空」——不是删掉，而是彻底不写那里的 td。浏览器靠 rowspan 的数值自动跨过对应行数，如果多写了 td，就会挤占空间、错位甚至渲染异常。

常见错误现象：
– 表格看起来“错行”或列宽突变
– 合并后下方内容被遮盖或偏移
– 开发者工具里看到 td 被强制换行或包裹在匿名盒子中

• rowspan="2" 表示这个单元格纵向占据当前行 + 下一行（共 2 行），下一行同一列位置不能再出现 td
• 如果表格有 3 行，想让第一行第一个 td 跨满，就写 rowspan="3"，且第二、三行的第一个位置都不写 td
• 和 colspan 混用时，先处理 rowspan 所在行的列布局，再按剩余列数补全其他行

合并后样式错乱？检查 border-collapse 和 padding

默认 border-collapse: separate 会让合并单元格的边框“各自为政”，视觉上像断开或加粗；padding 在跨行单元格上仍作用于所有参与行，容易造成上下间距膨胀。

• 务必加 table { border-collapse: collapse; }，否则 rowspan 单元格的上下 border 会重复渲染
• 避免对 td 设置 vertical-align: bottom 或 top 后又合并多行——文字可能贴顶或悬空，改用 middle 更稳
• 如果用了 CSS Grid 或 Flex 模拟表格，rowspan 完全无效，它只在原生 HTML 表格结构中起作用

动态生成 rowspan 时容易漏掉哪些逻辑

服务端渲染或 JS 拼接表格时，rowspan 不是静态写死就能一劳永逸的——得先统计相同值连续出现的行数，再决定在哪一行写 rowspan，其余行跳过该列。

• 不能只看“值相等”，还要确认是否「相邻行」，中间隔了一行不同值，就得重置计数
• 通常只在重复块的第一行设置 rowspan，后面同组行对应列直接 omit（不生成 td）
• 用 JS 动态操作时，修改 rowspan 属性后，DOM 会重排，但不会自动删除已被跨过的 td，必须手动移除，否则显示重复
• Vue/React 中若用 v-for 或 map 渲染，需提前聚合数据，而不是在模板里 if-else 判定——否则容易漏掉隐藏的 td

rowspan 对语义化和可访问性的影响

屏幕阅读器依赖表格的行列关系理解结构。rowspan 本身没问题，但若没配好 scope、headers 或表头缺失，会导致读出“第几行第几列”时逻辑错乱。

• 跨行的 th 必须加 scope="row"（横向标题）或 scope="col"（纵向标题），否则读屏软件无法关联数据单元格
• 不要用 rowspan 替代真正的分组逻辑，比如把“部门 A”跨 5 行，但其中混着“部门 B”的数据——这违反表格语义
• 导出为 Excel 时，多数库（如 SheetJS）能识别 rowspan，但部分旧版 Excel 渲染可能拉伸失真，测试时别只看浏览器

真正难的不是写 rowspan，而是保证它出现在对的位置、被删掉的 td 真的没生成、以及跨行之后整个表的阅读节奏没被打乱。