必须手动计算连续相同值的行数并为首个单元格设置rowspan，后续对应位置的必须完全删除，否则导致列错位；rowspan不跨生效，且不能用css隐藏替代dom移除。
怎么用 rowspan 合并第一列重复内容
直接靠浏览器自动识别“相同内容”合并是不可能的；rowspan 必须手动指定跨行数，且只作用于你写在起始单元格上的那一处。所谓“合并第一列所有相同单元格”，本质是：扫描第一列，把连续相同的值视为一组，对每组第一个 <td> 或 <code><th> 加 <code>rowspan="n"，然后删掉该组后续行对应位置的所有 <td>。
<ul>
<li>必须是**连续相同值**才可合并，中间断开（哪怕只隔一行）就得另起一组</li>
<li>
<code>rowspan 值不能写错：比如“语文”出现在第1、2、3行，就写 rowspan="3"，不是 "2" 也不是 "4"
<td></td> 或 <td> </td> 都不行，否则整列右移<thead> 和 <code><tbody>，注意 <code>rowspan 不跨分组生效；第一列合并通常只在 <tbody> 里做
<h3>为什么合并后第二行第一列突然多出空白或错位</h3>
<p>90% 是因为你在本该留空的位置写了 <code><td>。比如第一列前三行都是“高一(1)班”，你写了：
<pre class="brush:php;toolbar:false;"><tr>
<td rowspan="3">高一(1)班</td>
<td>张三</td>
</tr><tr><td>李四</td></tr><tr><td>王五</td></tr></pre>
<p>这是对的；但若第二行误写成：</p>
<pre class="brush:php;toolbar:false;"><tr>
<td></td>
<td>李四</td>
</tr></pre>
<p>那就等于强行加了一列，导致“李四”被挤到第三列，整个表格结构崩坏。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>检查技巧：打开开发者工具 → Elements 面板 → 展开每一行 <code><tr>，数 <code><td> 或 <code><th> 个数。第一列被 <code>rowspan 覆盖的行，子元素数量必须比首行少 1 个
display: none）来“假装留空”，rowspan 只认 DOM 结构，不认样式如何安全地批量处理第一列重复值
纯手写容易漏算，尤其行数多时。推荐先用纸笔或表格软件画网格，标出每组起始行、结束行、跨行数；再按“从上到下、从左到右”顺序填标签。若必须代码生成，核心逻辑是：
- 遍历
<tbody><tr>，提取第一列文本（<code>row.cells[0].textContent.trim()） - 遇到新值，记录起始行索引；继续往下比，直到值变化或到末尾，算出跨行数
n - 在起始行第一列单元格写
rowspan="n"，然后跳过接下来n−1行的第一列单元格（即不生成<td>） <li>注意：最后一组要单独处理，避免循环结束时漏掉</li> <p>真正难的不是加属性，而是确保每行展开后的逻辑列数一致——人眼数三遍都可能漏掉某一行少删了一个 <code><td>，草图比代码更可靠。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
