rowspan值必须等于实际跨行数，后续行对应列需跳过渲染；scope="row"是表格可访问性硬性要求，仅用于th；多级分组时需按子组粒度单独计算rowspan；动态渲染应预处理分组而非依赖状态变量。
rowspan 值必须等于实际跨行数，且后续行对应列要跳过渲染
很多人写完 rowspan="3" 后，在接下来两行的同一列里还继续写 <td>，结果浏览器自动补单元格，导致错位、列宽崩坏、打印时内容被截断。本质是：rowspan 不是“视觉合并”，而是“结构预留”——它告诉浏览器：“这一列位置我占了 3 行，后面两行别再给我塞 <code><td>”。<p>常见错误现象：</p>
<ul>
<li>左侧参数名只显示一次，但右侧数据列整体右移一列</li>
<li>表格在移动端横向滚动异常，或某些列莫名变窄</li>
<li>用开发者工具检查 DOM，发现某行 <code><tr> 里 <code><td> 数量比其他行少一个，但渲染却多出空白单元格<p>正确做法是：统计好每组参数对应的行数（比如“网络”下有 4 个子项，“摄像头”下有 6 个），然后仅在该组第一行渲染带 <code>rowspan 的 <td scope="row">，其余行完全跳过这一列。<h3>scope="row" 必须加在参数单元格上，否则语义断裂</h3>
<p>不加 <code>scope="row"，屏幕阅读器无法把“5G 频段”这个标签和它右边的“n1/n3/n28”关联起来；前端自动化测试工具（如 axe）也会报 table-headers-valid 错误。这不是“可有可无”的修饰，而是表格可访问性的硬性要求。
使用场景：
- 商品对比表中，“处理器”“内存”“电池容量”等作为左侧参数项
- 云服务功能矩阵里，“身份认证”“API 网关”“日志审计”等作为能力维度
- Obsidian 中用 HTML 表格展示多源技术选型，需被插件正确解析结构
注意：scope="row" 只能用于 <th>，不能用在 <code><td> 上；如果参数名不是表头级内容（比如只是普通描述文本），就该用 <code><td> + <code>rowspan，而非强行套 <th>。<h3>多级参数分组时，rowspan 要按子组粒度单独计算</h3>
<p>当参数本身有嵌套结构（例如“网络”大类下分“4G”“5G”“Wi-Fi 6”三个子组），不能直接给“网络”设 <code>rowspan="12" 就完事。因为子组之间可能有分隔行、说明行或空行，真实跨行数 ≠ 子项总数。
实操建议：
- 先对原始数据按一级分类（如“网络”）分组，再对每个一级组内按二级标签（如“5G 支持”“5G 频段”）聚类
- 为每个二级标签单独计算行数，比如“5G 频段”含 3 个具体频段值，则其
rowspan="3" - 若某二级标签下只有说明文字无具体值（如“注：需搭配 NSA/SA 双模基带”），也应计为 1 行，避免后续
<tr> 列数错乱<p>容易踩的坑：用索引差值代替真实行数（如 <code>lastIndex - firstIndex + 1），一旦中间插入空行或条件过滤行，结果立刻出错。React/Vue 动态渲染时，rowspan 不能靠“是否首行”状态变量判断
在 React 中写
{isFirstRow && <td rowspan="{n}">{label}</td>}看似合理，但如果data.map()是全量遍历而非按组切片，isFirstRow会在不同分组间污染——比如“网络”组最后一行和“摄像头”组第一行共享同一个闭包变量，导致后者 label 单元格没渲染出来。可靠解法是预处理 + 分组遍历：
- 用
reduce构建numRowsByLabel = { '网络': 4, '摄像头': 6 } - 外层用
Object.keys(numRowsByLabel).map(label => ...)控制分组顺序 - 内层用
data.filter(row => row.category === label).map(...)，并在每次内层 map 开始时重置let isFirstRow = true
性能影响：预处理是 O(n) 时间，但换来的是渲染阶段零逻辑判断，DOM 结构稳定，React diff 更高效。比起运行时反复查数组、比索引，这点开销几乎可忽略。
最常被忽略的一点：rowspan 合并后，单元格默认垂直居中，但如果你加了
vertical-align: top或设置了固定高度的line-height，又没同步调整 padding，内容会紧贴顶部甚至被裁剪——尤其在导出 PDF 或打印时特别明显。 - 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
