colspan 是让当前单元格向右占据指定列数，需手动删除其右侧对应数量的单元格；浏览器跳过被占位置，视觉上“合并”但 dom 中仍为单个 。
colspan 是什么，它到底在合并谁？
colspan 不是“把两个 <td> 合成一个”，而是让当前单元格向右占满指定列数，同时你必须手动删掉它右边那些本该存在的单元格。浏览器渲染时会跳过被占据的位置，视觉上像“合并”了——但 DOM 里始终只有一个 <code><td> 元素。<p>常见错误现象：<code>Table row has fewer cells than required、某行突然变短、边框错位、文字挤成一团。
-
colspan="1"是默认值，可省略 -
colspan="0"在 HTML5 中无效，会被忽略 - 数值必须是正整数，不能是小数或负数
- 如果表头定义了 4 列（比如
<th></th> <th></th> <th></th> <th></th>），那每一行所有colspan值加起来必须等于 4
怎么写才不会让表格结构崩掉？
关键在于“删对位置”。横向合并时，要删的是当前单元格**右侧连续的单元格**，不是随便删。
比如你想让第一列跨两列：
<tr> <td colspan="2">标题</td> <td>第三列</td> <td>第四列</td> </tr>
上面这行共 4 列（colspan="2" 占两列 + 后面两个 <td> 各占一列 = 4）。如果你多写一个 <code><td>：<pre class="brush:php;toolbar:false;"><tr>
<td colspan="2">标题</td>
<td>第三列</td>
<td>第四列</td>
<td>第五列</td> <!-- 多了！这一行就变成 5 列 -->
</tr></pre>
<p>整行就会撑开，破坏对齐。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>用 Chrome DevTools 的 Elements 面板右键表格 → “Edit as HTML”，临时删掉可疑 <code><td> 看是否恢复整齐<li>检查每行的列总数：把所有 <code>colspan 值加起来，再加未设 colspan 的单元格数，结果必须一致
<tr> 里混用 <code>colspan 和 rowspan —— 容易误判逻辑行列位置colspan 和 rowspan 能一起用吗？
能，但必须小心计算“逻辑行列坐标”。一个单元格同时设 colspan="2" 和 rowspan="3"，意味着它要占据右 1 列 + 下 2 行的全部位置，总共覆盖 2×3=6 个逻辑格子。
这时候你要确保：它所在行右侧少写 1 个 <td>；它下方两行中，对应列位置都得空着（不能出现任何 <code><td> 或 <code><th>）。<ul>
<li>先处理 <code>rowspan：找到最上方的目标单元格，设好值，然后删掉它正下方所有同列的单元格
colspan：在同一行内，从左到右确认哪些位置已被占用，避免重复写<td> 必须删掉<h3>容易被忽略的兼容性细节</h3>
<p><code>colspan 本身兼容性极好（IE6+ 都支持），但问题常出在样式叠加和响应式断点上。
- CSS 中
width: 100%或table-layout: fixed会影响colspan单元格的实际宽度分配，建议用min-width控制最小可视宽度 - 移动端小屏下，大
colspan可能导致内容溢出或换行异常，可用white-space: normal强制换行 - 辅助工具（如屏幕阅读器）会按逻辑行列读取，
colspan="2"的单元格会被读作“跨两列的标题”，所以语义要清晰，别用它藏关键信息
真正难的不是写 colspan，而是删对那个该删的 <td> —— 多数错位问题，根源都在这里。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
