colgroup必须是table的直接子元素，位于caption之后、thead/tbody之前，否则样式静默失效；col的span表示从当前列起连续覆盖几列，需确保总列数匹配；仅width和background-color等少数css属性在col上有效，隐藏列应使用visibility: collapse。
colgroup 必须放对位置，否则样式完全不生效
浏览器只在解析 <table> 开头阶段读取列结构信息，<code><colgroup></colgroup> 必须是 <table> 的**直接子元素**，且顺序严格：在 <code><caption></caption>（如果有）之后、<thead>/<code><tbody>/<code><tr> 之前。写错位置（比如塞进 <code><tbody> 里，或跟在第一行 <code><tr> 后面）会导致样式静默失效——DevTools 不报错，也不高亮，你只会发现样式没反应。
<p>验证是否生效最直接的方法：打开 DevTools，展开 <code><table> 节点，确认 <code><colgroup></colgroup> 出现在第一层子节点，且紧邻 <caption></caption>（或 table 开始标签）之后。
- ✅ 正确：
<table> <caption>...</caption> <colgroup>...</colgroup> <thead>...</thead> <tbody>...</tbody> </table> - ❌ 常见错误：
<tbody> <colgroup>...</colgroup> <tr>...</tr> </tbody>（被忽略） - ⚠️ 注意：
<colgroup></colgroup>不生成任何 DOM 节点，它只影响后续所有<tr> 中对应列的渲染计算 <h3>col 标签的 span 属性不是“第几列”，而是“从当前开始连续几列”</h3> <p><code>span是目前唯一广泛兼容的属性，但它容易引发列数错位。它的含义是：**从当前<col>所在位置起，向右连续覆盖 N 列**，不跳列、不索引、不感知总列数。例如表格有 5 列，
<col span="2"> <col> <col span="2">表示：第 1–2 列、第 3 列、第 4–5 列 —— 总共 5 列，一一对应。但如果写成<col span="3"> <col span="3">，第二个span="3"的后两列超出范围，会被丢弃，第 5 列实际无样式可继承。- ✅ 更稳做法：显式写出每个
<col>，避免 span 计算歧义，尤其在 JS 动态渲染时，务必让生成的<col>数量与首行tr.cells.length严格一致 - ⚠️
<col>必须闭合（HTML5 要求），不可省略结束标签 - ⚠️ 多个
<colgroup></colgroup>之间夹注释或空格节点，旧版 Safari 可能中断列声明
哪些 CSS 属性真正在 col 上起作用？别白费劲设无效样式
<col>支持的样式极少，浏览器只用它做布局计算，不参与内容绘制。设错属性不仅无效，还可能掩盖真正问题。- ✅ 稳定有效：
width（必须是具体值，如120px、30%；auto无效）、background-color（Chrome/Safari 支持较好，Firefox 行为不稳定） - ⚠️ 部分支持：
text-align（Chrome 可继承影响单元格，Safari 常忽略；如需可靠对齐，仍得写在<td> 或 <code><th> 上） <li>❌ 基本无效：<code>color、font-size、padding、margin、border（列边框兼容性极差，建议用border-collapse: collapse+ 单元格边框替代） - ⚠️ 注意：
background-color容易被<td> 自身背景色覆盖，优先级低于单元格样式；真要统一背景，不如用 <code>td:nth-child(2)或加 class 控制隐藏整列要用 visibility: collapse，别用 display: none
想动态控制某几列显示/隐藏，唯一规范方式是给
<col>设置visibility: collapse。它会让列隐藏且不占空间，相邻列自动填补空隙，语义正确且兼容稳定。- ✅ 正确：
<col style="visibility: collapse">或 JS 操作col.style.visibility = 'collapse' - ❌
display: none在<col>上无效，浏览器直接忽略 - ⚠️ 如果表格用了
table-layout: auto，visibility: collapse可能不触发重排，务必搭配table-layout: fixed使用 - ⚠️ 隐藏后，
<th>/<code><td> 的 <code>:nth-child()伪类序号不变，仍按原始列数计数真正关键的点在于：
<col>和<colgroup></colgroup>是声明式列结构机制，不是样式补丁。样式没反应，90% 是位置错了、列数对不上，或者写了根本不起效的属性——先检查这三处，比反复调 CSS 优先级更高效。
- ✅ 正确：
- ✅ 更稳做法：显式写出每个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
