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 真的没生成、以及跨行之后整个表的阅读节奏没被打乱。
