colgroup必须作为table的直接子元素，位于caption之后、thead/tbody/tr之前；放错位置浏览器会静默忽略。

colgroup 本身不渲染内容，也不能直接写样式到它身上就“生效”——你得用 col 标签配合，并且位置、数量、span 计算都得对，否则样式会错列、漏列甚至完全看不见。

colgroup 必须放在哪儿？放错就等于没写

它只能是

的直接子元素，且顺序严格：（如果有）之后、// 之前。常见错误包括：

• 把

塞进 或 里 —— 浏览器直接忽略，DevTools 不报错也不提示

写在

后面 —— 同样失效，但 HTML 解析器可能自动移到前面，行为不可靠

多个

连续出现时，中间夹了其他标签（比如注释或空格）—— 某些旧引擎会中断解析

span="n" 是怎么数列的？不是按“第几列”而是按“接下来几个”

span 属性只控制从当前

开始向右连续覆盖多少列，不关心表格总列数，也不支持跳列。容易踩的坑：

• 一个 4 列表格写了

→ 第二个 只影响第 3、4 列，“第 5 列”不存在，多余 span 被丢弃

动态生成表格时，如果 JS 拼接的

列数和 声明不一致，样式必然错位

用了

支持的样式非常有限，浏览器只拿它做列级布局计算，不参与内容渲染。实测有效的有：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• width（推荐用 CSS width，别用已废弃的 HTML width 属性）
• background-color（但会被

？只用 行不通

是容器，不带任何列粒度控制能力。如果你需要：

• 第 1 列宽 100px、第 2 列背景红、第 3 列文字右对齐 → 必须写三个

第 1–2 列统一宽 120px、第 3 列单独设背景 → 写

+

漏写一个

（比如 3 列表格只写了 2 个）→ 最后一列无样式继承，浏览器不会补全样式逻辑

真正关键的一点：所有

加起来的 span 总和，最好等于表格实际列数；差一点可能不报错，但样式错位几乎不可避免——尤其当表格含动态列或服务端渲染时，这点最容易被忽略。

或		—— colgroup 不感知跨格，仍按物理列数分配，视觉上可能看起来“没对齐” 哪些 CSS 属性真能起作用？别白费劲设 color 或 border
自身背景色覆盖，优先级低） text-align（仅对 IE 和部分旧 Edge 有效；现代 Chrome/Firefox 基本忽略） 明确无效或不可靠的包括：color、font-size、border、padding、margin。想控制文字颜色或边框，必须落到	/		上。 为什么一定要写

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！