colgroup必须作为table的直接子元素，位于caption之后、thead/tbody/tr之前；放错位置浏览器会静默忽略。
colgroup 必须放在 table 的哪个位置才生效
放错位置等于没写。<colgroup></colgroup> 只能是 <table> 的直接子元素，且必须紧接在 <code><caption></caption>（如果有）之后、任何 <thead> / <code><tbody> / <code><tr> 之前。常见失效场景包括：<ul><li>把 <code><colgroup></colgroup> 塞进 <tbody> 或 <code><tr> 里——浏览器静默忽略，DevTools 不报错也不高亮
<li>写在第一行 <code><tr> 后面——解析器可能自动前移，但行为不可靠，尤其在 SSR 或模板引擎中
<li>多个 <code><colgroup></colgroup> 之间夹了注释或空格节点——旧版 Safari 和某些 HTML 解析器会中断列声明
验证是否生效最简单的方法：打开 DevTools，检查 <colgroup></colgroup> 是否出现在 <table> 下第一层子节点，且顺序正确。<h3>col 标签的 span 属性到底怎么算列</h3>
<p><code>span 不是“从第 N 列开始跨 M 列”，而是“从当前 <col> 开始，向右连续覆盖 M 列”。它不感知表格总列数，也不跳列，只按顺序计数。
-
<col span="2">→ 覆盖当前列 + 下一列（共 2 列） -
<col> <col span="3">→ 第一个<col>覆盖第 1 列，第二个覆盖第 2、3、4 列 - 如果表格实际只有 3 列，但写了
<col span="2"> <col span="2">，第二个<col>的多余 span（第 4 列）被丢弃，第 3 列样式由第一个<col>覆盖，容易误判
更稳的做法是显式写出每个 <col>：<col>
<col>
<col>，避免 span 计算歧义。动态渲染时，务必让 JS 生成的 colgroup 列数与首行 tr.cells.length 严格一致。
哪些 CSS 属性在 col 上真正起作用
<col> 支持的样式极少，浏览器只拿它做布局计算，不参与内容绘制。别白费劲设无效属性：
- ✅ 稳定有效：
width（px/%/em，auto无效）、background-color（Chrome/Safari 支持较好，Firefox 行为不稳定） - ⚠️ 部分支持：
text-align（Chrome 可继承影响单元格，Safari 常忽略；如需可靠对齐，仍得写在<td> 或 <code><th> 上） <li>❌ 基本无效：<code>color、font-size、padding、margin、border（列边框兼容性极差，建议用border-collapse: collapse+ 单元格边框替代） - 某列
<col>没设width→ 该列宽度可能为 0（Safari 尤其明显） -
width: auto在<col>上无效，只能用具体值（px、%、em） - 百分比宽度按表格容器宽度计算，若容器本身宽度未定（如 flex 子项），结果不可预测
- 响应式下，纯
width不够灵活，建议搭配min-width和max-width
特别注意：background-color 容易被 <td> 自身背景色覆盖，优先级低于单元格样式。真要统一背景，不如用 <code>td:nth-child(2) 或加 class 控制。
table-layout: fixed 下 col 的宽度陷阱
启用 table-layout: fixed 后，列宽完全由 <col> 或第一行单元格决定，但风险陡增：
真正关键的是：<colgroup></colgroup> 不是样式捷径，而是结构前置声明。它只管“这一列该有多宽、底色是什么”，其余一切——字体、对齐、悬停、断点适配——都得回到 <td> 和 <code><th> 上补全。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
