正确合并三列需在或中设colspan="3"并删去被合并的冗余单元格，确保整行列数一致，避免错位；混合rowspan时下一行对应列须留空；CSS隐藏法仅为视觉替代，牺牲语义与可访问性。
用 colspan 属性合并三列，不是写成 colspan="3" 就万事大吉
直接在 <td> 或 <code><th> 标签里加 <code>colspan="3" 是基础操作，但容易忽略它对整行结构的牵连影响。浏览器会把该单元格当成“占三格”的宽度，后续的 <td> 会自动顺延到第四列位置——如果没算好原有列数，表格就会错位甚至塌陷。
<p>常见错误现象：<code>colspan="3" 后紧跟两个 <td>，结果整行变成 5 列（3+1+1），而其他行只有 4 列，视觉上出现列宽不齐、边框断裂或内容挤在一起。
<ul><li>务必先确认当前行「原本该有多少列」，再决定要不要删掉被合并掉的那几个 <code><td>
<li>
<code>colspan 值必须是正整数，不能是 "3px" 或 3.0，否则无效
colspan 和 rowspan 后随意增减单元格数量——混合合并时行列计数要分开算合并前三列时，<tr> 里剩下的单元格数量要手动减二
<p>比如原始表格每行有 4 列：<code><td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>。现在要把 A、B、C 合成一个单元格，那就得删掉 B 和 C 对应的两个 <td>，只留一个带 <code>colspan="3" 的单元格，再加 D：
<tr>
<td colspan="3">A+B+C</td>
<td>D</td>
</tr>
如果还保留原来的四个 <td>，哪怕第一个写了 <code>colspan="3"，浏览器也会渲染出 6 列宽度（3+1+1+1），破坏对齐。
立即学习“前端免费学习笔记（深入）”；
- 检查方法：数一数
<tr> 内所有 <code><td>/<code><th> 的 <code>colspan值之和，应该等于该表定义的列数（或与其他行一致） - 用开发者工具选中
<tr>，看 computed width 或 grid overlay，能快速暴露列数错位 <h3>和 <code>rowspan混用时，被跨行的那些行必须「留空位」如果某个单元格既要跨 3 列又要跨 2 行（
colspan="3" rowspan="2"），那么它下方那一行的对应三列位置就不能再放普通<td>，否则会重叠或错乱。正确做法是：下一行在这三列的位置上，什么也不写，或者用 <code><td></td>占位但不加内容——但更稳妥的是直接跳过，靠rowspan自动撑开空间。- 错误写法：
<tr><td colspan="3" rowspan="2">Header</td></tr> <tr> <td>X</td> <td>Y</td> <td>Z</td> </tr>→ 第二行的 X/Y/Z 会被压在 Header 下面 - 正确写法：第二行只放第 4 列及之后的
<td>，前三列由上面那个 <code>rowspan覆盖 - Chrome 和 Firefox 对
rowspan+colspan的解析基本一致，但老版 IE 可能丢弃部分跨行效果，如需兼容，避免嵌套太深
用 CSS 实现「视觉上」合并三列，绕过 HTML 结构限制
有些场景下，HTML 表格结构已经固定（比如后端模板生成的表格），无法改
colspan，但又需要让前三列表头看起来是一体的。这时可以用 CSS 隐藏中间两列的边框、背景、文字，并拉伸第一列的宽度：th:first-child { width: 60%; background: #f5f5f5; } th:nth-child(2), th:nth-child(3) { display: none; } table { border-collapse: collapse; }这招不改变 DOM 结构，所以适合动态渲染或受限于模板引擎的项目，但注意：它只是视觉欺骗，导出 Excel 或屏幕阅读器仍会读出三列。
- 不能用于需要语义化表格的场景（比如无障碍要求高的后台系统）
- 如果列内有交互元素（如按钮、输入框），
display: none会让它们完全不可用 - 响应式断点下，
width建议改用flex或grid替代，纯表格 + CSS 合并容易失控
真正合并三列，
colspan是唯一语义正确且广泛支持的方式；所有绕开它的方案，都是在妥协可访问性或维护性。动手前多看一眼相邻行的列数是否对得上，比事后调样式省力得多。 - 错误写法：
