colgroup必须作为table的直接子元素，位于caption之后、thead/tbody/tfoot/tr之前；放错位置浏览器会静默忽略，devtools无报错。
colgroup必须放在table的哪个位置才生效
放错位置就等于没写，浏览器会静默忽略，DevTools里也看不出报错。
它只能作为<table>的直接子元素，且顺序固定：<code><caption></caption>（如果有）之后、<thead>/<code><tbody>/<code><tfoot>/<code><tr>之前。
<ul>
<li>✅ 正确：<code><table>
<caption>...</caption>
<colgroup>...</colgroup>
<thead>...</thead>
<tbody>...</tbody>
</table>
<colgroup></colgroup>塞进<tbody>里，或写在<code><tr>后面，甚至嵌在<code><th>里
<li>⚠️ 注意：<code><colgroup></colgroup>不生成任何DOM节点，它只影响后续行中对应列的渲染计算，不是“画出来”的东西用col标签配合span控制列范围时容易数错列
span不是“第几列到第几列”，而是“从当前位置开始连续占几列”——它按<col>出现顺序依次分配，和表格实际列数必须对得上。
- 比如表格有5列，写了
<col span="2"> <col span="1"> <col>，那前两列归第一个<col>，第三列归第二个，第四、五列由第三个<col>覆盖（因为没写span默认为1） - 如果总
span加起来是6，但实际只有5列，最后一列样式会丢失；如果总和是4，第五列就完全没被<col>覆盖，也就没继承任何列级样式 - 动态渲染表格时，如果
<th>用了<code>colspan或rowspan，<col>的列序仍按原始结构算，不是按渲染后视觉列数哪些CSS属性在col上真正起作用
别往
<col>上写color、font-size、padding——这些基本无效。它只响应极少数布局相关属性。- ✅ 安全可用：
width（推荐用px或%）、background-color（仅当整列有内容且触发列渲染上下文时才稳定）、border（只影响列左右边缘，不是单元格内边框） - ❌ 基本无效：
color、text-align（Chrome支持但Safari可能忽略）、vertical-align、margin、padding - ⚠️ 覆盖优先级：单元格自身写的
background-color会直接盖掉<col>的同名样式；想确保生效，要么清掉单元格样式，要么用!important（不推荐）
隐藏某几列该用visibility: collapse还是display: none
display: none对<col>完全无效，别试。唯一可靠方式是visibility: collapse，但它依赖table-layout: fixed才能触发重排。- ✅ 正确写法：
<col style="visibility: collapse">，或JS里col.style.visibility = 'collapse' - ⚠️ 必须搭配：
<table style="table-layout: fixed">，否则在<code>auto模式下可能不收缩空间 - 注意：
nth-child()伪类序号不变，隐藏后第3列仍是:nth-child(3)，不影响CSS定位逻辑
复杂点在于列数匹配和位置校验——这两处出错，整个
<colgroup></colgroup>就形同虚设，但你很难一眼发现。 - ✅ 安全可用：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
