rowspan必须填确切正整数，不可用0或大数凑；需先分组统计再渲染，被跨行对应列必须完全省略<td>标签，且不跨<thead>/<tbody>边界，无障碍场景应优先用headers属性绑定语义。
rowspan值必须是正整数，不能靠“填大数”凑合
浏览器不会帮你推算“跨到最后一行”，rowspan="0"、rowspan="-1"或rowspan="999"都不可靠：rowspan="0"被直接忽略，退化为rowspan="1"；rowspan="999"在 Chrome/Firefox 中会截断到实际剩余行数，但在 IE 中可能错乱甚至崩溃。你必须明确知道“从当前行开始，往下连续几行属于同一组”，然后填那个确切数字。
- 动态生成前，先遍历原始数据，做 run-length encoding（连续段编码），不是统计全局频次
- 例如数据中
"Apple"出现在第 0、1、3 行，中间被"Banana"隔开，那第 3 行的"Apple"是新一段，rowspan应为 1，不是 3 - 服务端 PHP 或前端 JS 都需在渲染前完成分组统计，不能边遍历边猜
被跨行的对应列必须彻底省略 <td>，不是留空
这是最常翻车的地方：很多人以为写个 <td></td> 或空格占位就行，但浏览器按 HTML 标签数量算列数——多一个 <td>，整行就多一列，后续所有 rowspan 和 colspan 全部偏移。开发者工具 Layout 面板出现 “Collapsed cells” 警告，基本就是这里漏跳了。
- 正确做法：在被跨过的行里，对应列位置不生成任何
<td>或<th>标签 - React/Vue 中别用
v-if="false"或{showLabel && <td>...}，它仍会留下注释节点或空元素；要用条件逻辑完全跳过 JSX/模板片段 <li>JS 拼字符串时，确保该列位置字符串为空，而不是拼出 <code>"<td></td>" - 动态渲染时，如果数据分段渲染（如先 render thead，再 render tbody），就不能指望
rowspan穿透两个分组 - 若需跨区域合并，建议放弃
rowspan，改用headers属性 +<th scope="row">显式绑定语义 - 用
table.rows[i].cells.length检查每行单元格数是否一致，不一致说明某处<td>没跳干净 - 若表格用于数据展示且需 WCAG 合规，优先用
headers属性手动绑定，例如<td headers="header-id"> - 避免在同一个表格里混用复杂
rowspan+colspan+ 多层<thead>/<tbody>，调试成本和可访问性风险会指数上升 - 真正难搞的不是怎么写
rowspan，而是怎么让它在 DOM 更新、排序、筛选后还能自动重算并同步删掉旧的被跨<td>—— 这部分往往被忽略
rowspan 不跨 <thead>/<tbody> 边界，分组结构影响计算范围
rowspan 只在当前逻辑分组内生效。比如你在 <thead> 里写 <th rowspan="4">ID</th>，它只管 <thead> 里的行数，不会延伸进 <tbody>。想让表头纵向贯穿整个表格，要么把全部内容包进一个 <tbody>，要么改用 CSS Grid。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
无障碍支持差，屏幕阅读器常无法关联被跨单元格
即使 HTML 结构完全正确，多数屏幕阅读器仍难以把被 rowspan 覆盖的 <td> 和顶部 <th> 正确配对，尤其当表头自己也用了 rowspan 或 colspan 时。这不是 bug，是规范限制——rowspan 是纯视觉布局指令，不携带语义关系。
立即学习“前端免费学习笔记（深入）”；
