直接用 rowspan 和 colspan 合并单元格时，必须确保 HTML 结构准确：colspan 控制向右占列数，rowspan 控制向下占行数，二者共存需行列双重对齐，且被跨越位置在源码中必须真实留空，否则表格错位。
直接用 rowspan 和 colspan 就能合并，但写错一个数字、多写一个 <td>，表格就立刻错位——这不是样式问题，是 HTML 结构被破坏了。
<h3>colspan 怎么让单元格横跨多列</h3>
<p>它只控制“向右占几格”，不改变行数，但会直接影响该行其余单元格数量。</p>
<ul><li>
<code>colspan="3" 表示这个 <td> 或 <code><th> 占据 3 列宽度，它右边那一列位置必须空着
<li>如果整行应有 4 列，你加了一个 <code>colspan="3"，那剩下所有单元格加起来必须刚好占 1 列（比如只剩一个 <td>）
<li>值必须是正整数：<code>colspan="2" ✅，colspan="2px" ❌，colspan="0" 在 HTML5 中被忽略
colspan 数值和实际单元格数对不上rowspan 怎么让单元格纵跨多行
它只控制“向下占几行”，不改变列数，但会强制“吃掉”下面行对应列的位置。
-
rowspan="2"表示这个单元格从当前行开始，覆盖本列的当前行 + 下一行 - 那么下一行的同一列位置，**不能出现任何
<td> 或 <code><th>**，否则浏览器会把它当新列渲染，导致整行错位 <li>如果 <code>rowspan="3"，后面两行该列都得留空；不是“合并后自动隐藏”，而是“你必须手动删掉那些<td>” <li>Chrome DevTools 里右键表格 → “Edit as HTML”，临时删掉疑似多余的 <code><td>，看是否恢复整齐，是最快定位方式 <h3>同时用 rowspan 和 colspan 容易踩哪些坑</h3> <p>二者可共存，但行列逻辑必须双重对齐：既保证每行总列数一致，又保证每列总行数一致。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a> <p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>写 <code>rowspan="2" colspan="3"前，先确认：目标区域确实是 2 行 × 3 列的矩形块 - 该单元格所在行，其他单元格列数之和 + 3 必须等于预期总列数
- 该单元格所在列，在后续 1 行中对应位置必须完全留空（因为已由
rowspan占据） - 屏幕阅读器仍按原始行列结构读取，若中间某行缺失
<th>，无障碍访问会混乱——语义没变，只是视觉跳过 <p>最常被忽略的一点：合并不是“把几个单元格缝在一起”，而是“让一个单元格假装自己是多个”。DOM 里永远只有一个 <code><td>，所有被跨越的位置在 HTML 源码中必须真实缺席。画草图、数清楚每行几列、每列几行，比反复调试 CSS 更有效。 </td>
