colspan 本身不会导致错位，错位源于表格结构不完整或列宽计算冲突；常见原因包括表头与数据行列数不一致、colgroup 宽度声明冲突、缺失 table-layout: fixed 等。
colspan 合并列本身不会错位，错位是因表格结构不完整或列宽计算冲突导致的视觉表现。
为什么 colspan 会让表格“看起来错位”
常见现象：某行用了 colspan="2"，但后续行对应位置的单元格内容明显偏移、列头对不上、边框断裂。根本原因不是 colspan 本身有问题，而是它暴露了底层结构缺陷：
- 表头（
<thead>）和数据行（<code><tbody>）列数不一致 —— 比如 <code><th> 有 5 个，但某行 <code><td colspan="2"> 后只跟了 3 个 <code><td>，实际列总数变成 4，浏览器自动补空或错行渲染 <li> <code><colgroup></colgroup>宽度声明与colspan冲突 —— 比如设了 5 列各width: 20%，但某行用colspan="2"跨两列，该单元格会按两个 20% 的总和（40%）撑开，若内容过长或字体渲染差异，就容易挤占相邻列空间 - 缺失
table-layout: fixed时，浏览器按内容重算列宽，colspan单元格内容一多，整列基准就被拉偏，后续行对不齐 - 写法要匹配：如果表格逻辑上是 5 列，
<colgroup></colgroup>就必须有 5 个<col>，哪怕某行用colspan="2"跨列，也不能少写 - 避免混合单位：
width: 20%和width: 150px混用会导致colspan计算失准，尤其在小屏下百分比可能被截断 - 推荐固定布局：
table { table-layout: fixed; width: 100%; }，再配<colgroup></colgroup>，这样colspan的宽度严格按声明比例分配，不随内容波动 - 拼接
<tr> <td colspan="2">标题</td> <td>A</td> <td>B</td> </tr>—— 这行共 4 列，但若表头写了 5 个<th>，浏览器就会在末尾补一个空 <code><td> 或错位渲染 <li> <code>CAST(... AS NVARCHAR(MAX))拼接时，容易漏掉<td> 闭合标签，导致后续所有 <code>colspan解析错乱 - 没包裹
<thead> 和 <code><tbody>，让浏览器用“容错模式”解析，<code>colspan在不同引擎下行为不一致（Chrome 可能自动修正，Firefox 可能直接断裂）调试
colspan错位最有效的检查点别猜，直接看结构是否“数字对得上”：
- 手动数一遍：表头
<th> 有几个？每行 <code><td> 的 <code>colspan值加普通<td> 数量，是否等于表头列数？ <li>打开浏览器开发者工具，选中表格 → 查看 <code><table> 元素右下角显示的 “Columns: X”，X 必须等于你定义的逻辑列数 <li>临时加 <code>border: 1px solid red到td, th，看错位处是不是某列“凭空消失”或“多出一条缝”——那是浏览器在补缺 - 禁用所有 CSS，只留 HTML 结构，确认错位是否仍在：如果还在，100% 是结构问题；如果消失，就是
width、padding或box-sizing干扰了渲染
真正难处理的不是
colspan本身，而是它像一面镜子，照出你表格结构里那些被忽略的列数守恒规则。一旦某处漏掉一个<td> 或多写一个 <code>colspan，错位就从那一行开始传染下去。 - 手动数一遍：表头
colspan 必须配合 <colgroup></colgroup> 使用吗
不是必须，但强烈建议。没有 <colgroup></colgroup> 时，colspan 单元格的宽度完全由内容决定，极易引发错位。加上后可锁定列宽基准：
T-SQL 动态生成 HTML 表格时 colspan 错位的典型坑
在 SQL Server 中用 FOR XML PATH('tr') 拼接 HTML，colspan 错位几乎必然发生，因为字符串拼接无法校验列数一致性：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
