html表格合并单元格本质是“占位+删除”：colspan="3"表示覆盖3个横向单元格并须删减对应，rowspan="2"要求下一行同列留空，否则结构错乱、边框断裂、可访问性失效。
HTML 表格合并单元格不是“加个属性就完事”，而是要主动管理网格结构——colspan 和 rowspan 的本质是“占位 + 删除”，漏删就会错行、错列、边框断裂。
colspan="3" 意味着同一行里少写两个 <td>
<p>横向合并的关键是：被合并的列位置，必须从代码中彻底移除。浏览器不会自动帮你跳过，它只按你写的 <code><td> / <code><th> 数量逐列排布。
<ul>
<li>
<code>colspan="3" 不是“让这个单元格变宽”，而是“它覆盖了本该存在的 3 个独立单元格”
<td> 上写 <code>colspan="3"，那这一行后续只能再写 2 个单元格（不是 4 个）
<tr>
<td colspan="3">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr> → 这行实际有 5 列（3+1+1），但第 4 个 <td> 会挤到第 5 列，导致下一行对不齐
<li>验证方法：用 <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 计算每行真实列数，确保所有 <tr> 结果一致
<h3>rowspan="2" 要求下一行同列位置完全留空</h3>
<p>纵向合并最易踩坑：很多人写了 <code>rowspan="2"，却还在下一行对应列补了 <td>，结果表格直接裂开。
<ul><li>
<code>rowspan="2" 表示“本格向下吞掉正下方那一格”，所以**下一行、同一列不能再出现任何 <td> 或 <code><th>**
<li>若在 <code><thead> 中用 <code>rowspan，<tbody> 第一行对应列也必须跳过——<code><thead> 和 <code><tbody> 是独立的行容器，但列坐标必须对齐
<li>典型反例：<code><tr>
<td rowspan="2">Name</td>
<td>Alice</td>
</tr>
<tr><td>Bob</td></tr> ✅ 正确；<tr>
<td rowspan="2">Name</td>
<td>Alice</td>
</tr>
<tr>
<td>Name</td>
<td>Bob</td>
</tr> ❌ 错位box model 是否跨行渲染；再检查 DOM 中下一行同列是否真的没节点同时用 colspan 和 rowspan 时，行列总数必须双重校验
二维合并（比如一个单元格横跨 2 列、纵跨 3 行）会让结构陡然复杂，稍一疏忽整张表就偏移。
- 先确定目标区域尺寸（如 2×3 矩形），设
colspan="2" rowspan="3"，然后严格按“从上到下、从左到右”顺序清理被覆盖的所有位置 - 该单元格所在行：右侧紧邻的 1 个
<td> 必须删掉（因 <code>colspan="2"） - 它下方连续 2 行：每行对应列位置都不得出现
<td>（因 <code>rowspan="3"覆盖 3 行，含自身） - 风险点：多级表头常用这种组合，但若
<thead> 内某 <code><tr> 列数 ≠ <code><tbody> 某 <code><tr> 列数，CSS <code>border-collapse: collapse会失效，边框断开 - 建议：复杂布局先手绘网格草图，标出每个单元格的行列坐标和跨度，再编码
- 响应式场景下，
colspan值无法动态适配屏幕宽度，rowspan更无法随内容高度自动调整 - 可访问性问题：屏幕阅读器依赖 HTML 表格结构推导行列关系，错位的
rowspan会导致读取顺序混乱 - 现代替代方案：
display: grid可用grid-column/grid-row实现同样视觉效果，且支持 auto-fit、minmax()、语义化嵌套 - 底线建议：纯数据展示、导出 PDF 或兼容老 IE 时用原生合并；其余情况优先用
<div role="table"> + Grid，结构清晰、逻辑可控 </div>
为什么用原生合并不如 CSS Grid？
不是不能用 colspan/rowspan，而是当需求超出“静态报表”范畴时，它们会快速变成维护噩梦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
