rowspan是结构声明而非视觉拉伸，必须写在起始td中且后续行对应列彻底省略td/th；跨thead/tbody无效，需用单tbody或grid模拟；动态生成时须按分组预处理行数。
rowspan 不是视觉拉伸工具，而是结构声明：它告诉浏览器“从此单元格起，向下跳过 N−1 行的同一列位置”。写错位置、漏删单元格、混用 thead/tbody，都会让跨行失效或错位。
rowspan 必须写在起始 <td> 里，且后续行对应列必须彻底省略
浏览器按源码逐行解析，rowspan="3" 的效果只在它所在的那个 <td> 标签上生效，不会“传染”给下面的行。关键约束是：接下来的 2 行（即第 2、3 行）中，**该列位置不能出现任何 <td> 或 <th>** —— 不是留空，是彻底不写。
- ✅ 正确：
<tr><td rowspan="3">配置项</td><td>开关</td></tr><tr><td>启用</td></tr><tr><td>禁用</td></tr> - ❌ 错误：
<tr><td rowspan="3">配置项</td><td>开关</td></tr><tr><td>启用</td><td>（这里多写了第一个 <td>）</td></tr>→ 浏览器自动补空单元格，rowspan在第 2 行就中断 - 调试建议：用开发者工具选中该
<td>，看 Elements 面板里是否包裹了下方多行区域；不要数源码里的<td>个数，要看渲染后实际单元格分布
跨行 + 跨列同时使用时，列总数必须严格对齐
rowspan 和 colspan 可以共存，比如 <td rowspan="2" colspan="3">汇总</td>，但它覆盖的 2×3=6 个逻辑格子，在后续行中都不得再出现占位单元格。一旦某行列数算错，整行会偏移。
- 常见陷阱：第一行有
<td colspan="3">A</td><td>B</td>（共 4 列宽），第二行却只写<td>C</td><td>D</td>（仅 2 个<td>）→ 浏览器自动补两个空<td>，但它们不参与rowspan计算，导致视觉列头错位 - 安全做法：先手绘网格草图，标出每行每个
<td>的rowspan/colspan值，再写代码；用固定宽度和短文本验证结构稳固后再加样式 - 注意：
colspan改变的是当前行宽度，rowspan影响的是后续行的列占用——两者作用方向不同，但最终都归结为“每行有效列数是否一致”
动态生成（如 React/Vue）时，rowspan 不能靠索引判断是否首行
在框架中遍历数据时，data.map((item, i) => ...) 的 i 是全局索引，不是分组内局部索引。直接写 i === 0 ? rowspan={n} : null 会失败，因为分组首行未必是数组第 0 项。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 正确预处理：用
reduce统计每组行数，例如const numRowsByLabel = data.reduce((acc, row) => { acc[row.label] = (acc[row.label] || 0) + 1; return acc; }, {}); - 渲染逻辑：外层按唯一
label列表循环，内层过滤出该组数据，再对过滤后数组的index === 0位置设置rowspan，其余行跳过该列渲染 - 典型错误：在
map内部用闭包缓存上一行label并比较，容易因异步更新或重渲染导致状态污染
跨 thead 和 tbody 区域的 rowspan 不被 HTML 规范支持
如果把 <th rowspan="4">分类</th> 放在 <thead>，但想让它跨到 <tbody> 的行，浏览器会忽略 rowspan 或渲染错乱。这不是 bug，是规范限制：rowspan 不能跨越语义区块边界。
- 兼容方案一：放弃
<thead>/<tbody>分区，整个表格用单个<tbody>，用 CSS 类区分表头样式（如.table-header） - 兼容方案二：改用
display: grid或display: flex模拟表格外观，配合 ARIA 属性（如role="table"）维持可访问性 - 重要提醒：即使视觉上看起来成功，屏幕阅读器可能无法正确播报跨区域单元格归属，影响无障碍体验
最易被忽略的是列宽传导效应：rowspan 单元格所在列的宽度，会强制整列所有行按该宽度布局。如果其他行该列内容很长，或用了 white-space: nowrap，就会把跨行结构“撑歪”。动手前务必用固定宽度和简短文本验证结构是否真正稳固。
