colspan是让单元格视觉上跨多列，仅影响渲染不改变结构；必须为正整数、写在td/th内，值错误或列数不守恒会导致错位，需手动验算每行列数总和。
colspan 不是“合并单元格”，而是让一个 <td> 或 <code><th> 渲染时占据连续多列的宽度——它不删数据、不改结构，只改变视觉占位。写错值或忽略列数守恒，表格立刻错位。
<h3>colspan="2" 为什么没效果？常见无效写法</h3>
<p>最常踩的坑是把非数字当值用：<code>colspan="2px"、colspan="two"、colspan="0" 全部被浏览器忽略，退化为默认 colspan="1"。规范只接受正整数。
-
colspan必须写在<td> 或 <code><th> 标签内，不能放 CSS 里，也不能靠 JS 动态加属性后自动重算布局 <li>值必须是纯数字字符串，比如 <code>colspan="3"，不能带单位、空格或字母 -
colspan="0"在所有主流浏览器中均无效，别指望它“自动跨到末尾” - 打开开发者工具，选中
<table>，看右侧面板「Computed」里是否出现 “Collapsed cells” 警告 <li>手动对每行做列数累加：每个 <code><td> 算 1，每个 <code>colspan="N"算 N，总和必须严格相等 - 特别注意
<thead> 和 <code><tbody> 行数不一致时，<code><thead> 的列总数（展开后）必须等于 <code><tbody> 任一行的列总数 <h3>table-layout: fixed 下 colspan 宽度失控怎么办？</h3> <p>设了 <code>table { table-layout: fixed; }后，colspan单元格的宽度 = 所跨各列的宽度之和，但这个“各列宽度”由第一行或<col>决定——不是你给<td> 设的 <code>width。- 避免直接给
colspan单元格设width，它大概率被忽略 - 用
<col>显式定义列宽，例如：<col style="width: 150px"> <col style="width: 100px"> - 内容溢出时，优先用
min-width+white-space: nowrap控制，而不是靠colspan拉伸 - Safari 和 Outlook（Windows 版）对
table-layout: fixed+colspan解析最不稳定，务必实测
复杂表头要不要用 colspan？得看场景
多层表头（比如先分大类再分小项）确实需要
colspan配合rowspan，但前提是逻辑清晰、列数可推导。一旦嵌套三层以上或动态列数变化，维护成本陡增。- 如果只是视觉分组，且数据本身是独立字段（如“CPU 使用率”和“内存使用率”），用
<div> + Flex 更健壮、可访问性更好 <li>必须用表格时，优先把所有 <code><th> 放在同一 <code><tr> 里，用 <code>colspan拆分顶层标题，避免跨行表头与跨列表头混用 -
colspan是静态属性，不会随屏幕缩放“自适应拆分”，响应式场景下需配合媒体查询或 JS 重绘，不能只靠它撑场面
真正难的不是写
colspan="3"，而是确保每一行都经得起列数验算，以及理解它和table-layout、rowspan、屏幕阅读器之间的隐性耦合。写完别急着预览，先数一遍每行的列总数。 - 避免直接给
表格错位了，怎么快速定位问题？
错位不是 colspan 本身的问题，而是某一行的“实际列数”和设计列数对不上。浏览器会默默补空单元格，但视觉和 DOM 都已失真。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
