rowspan是HTML中用于纵向合并单元格的属性，本质是当前单元格覆盖正下方指定数量的原始格子，值必须为正整数，且被覆盖行对应列须跳过td/th，否则导致表格结构错乱。
HTML 表格合并行，只靠 rowspan，没有别的捷径；但写错一行，整张表就错位——浏览器不报错，只默默渲染出奇怪的空白或重叠。
rowspan 是什么，又不是什么
rowspan 不是“让这个单元格变高”，而是“这个单元格要覆盖掉它正下方的若干个格子”。值为 2，表示它和下一行同列位置的那个 <td> 原本该存在的位置，现在被它“吃掉了”。
<ul>
<li>必须是纯正整数，<code>rowspan="2" 合法，rowspan="2px" 或 rowspan="two" 无效，浏览器直接忽略
<tr> 所在的行及其后续行，不会跨 <code><thead>/</thead>
<tbody> 分组生效
<li>如果 <code><th rowspan="3">姓名</th> 在第一行，第二、第三行同一列**绝对不能出现任何 <td> 或 <code><th>**，否则会被当成新列，列数膨胀
<h3>合并相同内容的行，关键在结构预判</h3>
<p>比如要把“语文”这个科目名对齐三行学生成绩，不能靠 JS 扫描后动态加 <code>rowspan，得从写 HTML 的第一行就开始规划网格。
- 先画草图：标出哪几行属于同一组，哪一列是固定标签（如“语文”“数学”），哪几列是变动数据
- 固定标签列用
rowspan，数据列按行平铺，不补空、不跳列 - 常见错误：在第二行对应列写了
<td></td>，以为“留个空位”，结果表格多出一列，右侧全偏移 - 验证方法：用
document.querySelectorAll('tr')[0].children.length和document.querySelectorAll('tr')[1].children.length对比，若不等，说明结构已错
和 colspan 混用时，最容易漏掉的约束
当一个单元格既要跨 2 行又要跨 3 列（即 rowspan="2" colspan="3"），它实际占用了 2×3=6 个原始格子。周围所有行、列都得按这个“吞掉”的数量做减法。
立即学习“前端免费学习笔记（深入）”；
- 该单元格所在行，其他单元格的
colspan总和 + 3 必须等于总列数（例如总列数为 5，则其余单元格colspan总和只能是 2） - 下一行中，该单元格覆盖的 3 列位置全部留空，不能写
<td>，也不能用 <code><td colspan="0">（无效） <li>如果表格有 <code><thead> 和 <code><tbody>，确保两部分展开后的逻辑列数一致；否则 <code>border-collapse: collapse下边框会断开 - 别指望用
rowspan实现“左侧固定 + 右侧滚动”效果——这种需求应改用position: sticky或 CSS Grid - 真正可靠的检查方式是：遍历每行，用
Array.from(tr.children).reduce((sum, el) => sum + (el.colSpan || 1), 0)算出该行逻辑列总数，所有行必须相等 - 响应式场景下更危险：
colspan="4"在小屏可能撑破容器，但浏览器仍静默渲染；建议配合table-layout: fixed和width控制 - 无障碍访问依赖正确结构：屏幕阅读器靠
rowspan推断语义关系，填错值会导致“科目：语文，学生：张三，学生：李四，学生：王五”读成四条独立条目
为什么开发者工具看不出问题
浏览器解析 rowspan 时不会抛错，DOM 树里也照常存在所有节点，但 getBoundingClientRect() 返回的宽度/高度可能异常，querySelector('td:nth-child(3)') 会选错目标——因为“第 3 列”在合并后已不存在。
