col标签仅支持width、background-color、border、visibility: collapse等有限css属性，color等样式无效；colgroup必须为table直接子元素且位于caption之后、thead/tbody之前；span属性表示覆盖后续列数，需与总列数严格匹配。
col 标签只对有限 CSS 属性生效，别乱试
很多开发者写完 <col style="color: red"> 发现文字没变色，不是浏览器 bug，是规范限制——color、font-size、padding、vertical-align 这些属性在 <col> 上根本无效。浏览器只认：width（最可靠）、background-color（整列底色）、border（仅列边缘，且兼容性差）、visibility: collapse（隐藏整列，比 display: none 更规范）。
text-align 是个灰色地带：Chrome 通常继承生效，Safari 和 Firefox 可能忽略，不能当真；想让某列内容右对齐，还是得在 <td> 或 <code><th> 上加 class 或内联样式。
<h3>colgroup 必须放在 table 顶部，位置错就等于没写</h3>
<p><code><colgroup></colgroup> 不是随便塞哪儿都行的标签。它必须是 <table> 的**直接子元素**，且严格位于：<code><caption></caption>（如果有）之后、<thead> / <code><tbody> / <code><tr> 之前。一旦写在 <code><tbody> 里，或插在 <code><tr> 后面，浏览器会静默忽略整个 <code><colgroup></colgroup> 块。
- ✅ 正确顺序：
<table> <colgroup><col></colgroup> <thead><tr><th>... <li>❌ 错误写法：<code><table><tbody><colgroup>... 或 <code><table><tr><colgroup>... <li>⚠️ 注意：<code><colgroup></colgroup>不能嵌套，也不能重复出现 - 用
<col>统一设列宽和背景主色调 - 用
td.col-price、th.sortable等选择器做精细化样式覆盖 - 避免在
<col>上写!important，它不起作用
span 属性不是“从第 N 列开始跨”，而是“覆盖接下来 N 列”
span 的语义容易误解。写 <col span="2"> 并不表示“控制第 2 列和第 3 列”，而是“从当前 <col> 所在位置起，连续覆盖接下来的 2 列”。所有 <col> 按顺序拼起来，必须和表格实际总列数完全一致。
比如 5 列表格，以下写法合法：<col>
<col span="3">
<col>（1 + 3 + 1 = 5）；但 <col span="2">
<col span="2">（共 4 列）会导致最后一列无对应 <col>，其 width 或 background-color 就不会被声明，可能回退到浏览器默认或被后续单元格样式覆盖。
建议用 class 替代内联 style，配合注释明确列意图：<col class="col-id">
<col class="col-name">
<col class="col-action" span="2">。
col 样式会被 td/th 覆盖，优先级低是常态
即使你给 <col> 设置了 background-color: #f0f0f0，只要某个 <td> 自己写了 <code>style="background-color: white"，那这格子就一定是白色——<col> 的样式只是“基础层”，不是“强制层”。这不是 bug，是 CSS 层叠规则决定的。
所以真正复杂表格中，<col> 更适合作为结构化占位和默认值兜底，而不是精确控制手段：
最易被忽略的一点：表格列数动态变化时（比如 JS 插入新列），<colgroup></colgroup> 不会自动同步，必须手动更新 DOM 中的 <col> 节点数量，否则样式错位几乎必然发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
