colgroup必须作为table的直接子元素，位于caption之后、thead/tbody/tr之前；放错位置浏览器会静默忽略。
colgroup 本身不渲染内容，也不能直接写样式到它身上就“生效”——你得用 col 标签配合，并且位置、数量、span 计算都得对，否则样式会错列、漏列甚至完全看不见。
colgroup 必须放在哪儿？放错就等于没写
它只能是 <table> 的直接子元素，且顺序严格：<code><caption></caption>（如果有）之后、<thead>/<code><tbody>/<code><tr> 之前。常见错误包括：
<ul><li>把 <code><colgroup></colgroup> 塞进 <tbody> 或 <code><tr> 里 —— 浏览器直接忽略，DevTools 不报错也不提示
<li>写在 <code><tr> 后面 —— 同样失效，但 HTML 解析器可能自动移到前面，行为不可靠
<li>多个 <code><colgroup></colgroup> 连续出现时，中间夹了其他标签（比如注释或空格）—— 某些旧引擎会中断解析
span="n" 是怎么数列的？不是按“第几列”而是按“接下来几个”
span 属性只控制从当前 <col> 开始向右连续覆盖多少列，不关心表格总列数，也不支持跳列。容易踩的坑：
- 一个 4 列表格写了
<col span="2"> <col span="3">→ 第二个<col>只影响第 3、4 列，“第 5 列”不存在，多余 span 被丢弃 - 动态生成表格时，如果 JS 拼接的
<tr> 列数和 <code><colgroup></colgroup>声明不一致，样式必然错位 - 用了
<th colspan="2"> 或 <code><td rowspan="2"> —— <code>colgroup不感知跨格，仍按物理列数分配，视觉上可能看起来“没对齐”哪些 CSS 属性真能起作用？别白费劲设 color 或 border
<col>支持的样式非常有限，浏览器只拿它做列级布局计算，不参与内容渲染。实测有效的有：立即学习“前端免费学习笔记（深入）”；
-
width（推荐用 CSSwidth，别用已废弃的 HTMLwidth属性） -
background-color（但会被<td> 自身背景色覆盖，优先级低） <li> <code>text-align（仅对 IE 和部分旧 Edge 有效；现代 Chrome/Firefox 基本忽略） - 第 1 列宽 100px、第 2 列背景红、第 3 列文字右对齐 → 必须写三个
<col> - 第 1–2 列统一宽 120px、第 3 列单独设背景 → 写
<col span="2" style="width:120px">+<col style="background:red"> - 漏写一个
<col>（比如 3 列表格只写了 2 个）→ 最后一列无样式继承，浏览器不会补全样式逻辑
明确无效或不可靠的包括：
color、font-size、border、padding、margin。想控制文字颜色或边框，必须落到<td>/<code><th> 上。 <h3>为什么一定要写 <col>？只用 <colgroup> 行不通</colgroup> </h3> <p><code><colgroup></colgroup>是容器，不带任何列粒度控制能力。如果你需要：真正关键的一点：所有
<col>加起来的span总和，最好等于表格实际列数；差一点可能不报错，但样式错位几乎不可避免——尤其当表格含动态列或服务端渲染时，这点最容易被忽略。 -
