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