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