必须手动计算连续相同值的行数并为首个单元格设置rowspan，后续对应位置的<td>必须完全删除，否则导致列错位；rowspan不跨<thead><tbody>生效，且不能用CSS隐藏替代DOM移除。
怎么用 rowspan 合并第一列重复内容
直接靠浏览器自动识别“相同内容”合并是不可能的；rowspan 必须手动指定跨行数，且只作用于你写在起始单元格上的那一处。所谓“合并第一列所有相同单元格”，本质是：扫描第一列，把连续相同的值视为一组，对每组第一个 <td> 或 <th> 加 rowspan="n"，然后删掉该组后续行对应位置的所有 <td>。
- 必须是**连续相同值**才可合并，中间断开（哪怕只隔一行）就得另起一组
-
rowspan值不能写错：比如“语文”出现在第1、2、3行，就写rowspan="3"，不是"2"也不是"4" - 被覆盖的行，第一列位置**一个标签都不能留**——连
<td></td>或<td> </td>都不行，否则整列右移 - 如果表格有
<thead>和<tbody>，注意rowspan不跨分组生效；第一列合并通常只在<tbody>里做
为什么合并后第二行第一列突然多出空白或错位
90% 是因为你在本该留空的位置写了 <td>。比如第一列前三行都是“高一(1)班”，你写了：
<tr><td rowspan="3">高一(1)班</td><td>张三</td></tr> <tr><td>李四</td></tr> <tr><td>王五</td></tr>
这是对的；但若第二行误写成：
<tr><td></td><td>李四</td></tr>
那就等于强行加了一列，导致“李四”被挤到第三列，整个表格结构崩坏。
立即学习“前端免费学习笔记（深入）”；
- 检查技巧：打开开发者工具 → Elements 面板 → 展开每一行
<tr>，数<td>或<th>个数。第一列被rowspan覆盖的行，子元素数量必须比首行少 1 个 - 不要依赖 CSS 隐藏（如
display: none）来“假装留空”，rowspan只认 DOM 结构，不认样式 - 如果数据来自 JS 渲染，务必在生成 HTML 前就完成 rowspan 计算和空单元格剔除，而不是渲染后再用 JS 补属性
如何安全地批量处理第一列重复值
纯手写容易漏算，尤其行数多时。推荐先用纸笔或表格软件画网格，标出每组起始行、结束行、跨行数；再按“从上到下、从左到右”顺序填标签。若必须代码生成，核心逻辑是：
- 遍历
<tbody><tr>，提取第一列文本（row.cells[0].textContent.trim()） - 遇到新值，记录起始行索引；继续往下比，直到值变化或到末尾，算出跨行数
n - 在起始行第一列单元格写
rowspan="n"，然后跳过接下来n−1行的第一列单元格（即不生成<td>） - 注意：最后一组要单独处理，避免循环结束时漏掉
真正难的不是加属性，而是确保每行展开后的逻辑列数一致——人眼数三遍都可能漏掉某一行少删了一个 <td>，草图比代码更可靠。
