col 的 span 属性从当前 col 元素位置起向右连续覆盖指定列数，如第一个 <col span="2"> 控制第1、2列，第二个 <col span="1"> 控制第3列；它不支持非连续列样式控制，且仅继承 border、background、width、visibility 等少数样式。
colgroup 的 span 属性到底控制哪几列？
colgroup 的 span 属性不是“选中第几列到第几列”，而是“从当前 col 元素开始，向右连续覆盖多少列”。它只作用于紧随其后的那些列（按 HTML 中 td/th 的顺序），不跳过、不回溯、不依赖索引。
常见误解是以为 <col span="2"> 会控制第 2 和第 3 列——其实它控制的是“该 col 所代表的起始列 + 后续 1 列”，即总共 2 列，起始位置由它在 colgroup 中的顺序决定。
- 第一个
<col span="2">→ 影响第 1、2 列 - 第二个
<col span="1">→ 影响第 3 列（因为前两个已被第一个col覆盖） - 若写成
<col span="1"><col span="2">→ 分别影响第 1 列、第 2–3 列
用 col + span 控制非连续列样式？不行，得换思路
col 元素本身不支持 class 或 style 的“条件性应用”，span 只能定义连续列范围。想单独给第 1、4、6 列加背景色？colgroup 直接做不到。
可行路径只有两条：
立即学习“前端免费学习笔记（深入）”；
- 拆分
colgroup：用多个<colgroup>块，每个块内用col控制一段连续列（例如一个colgroup管 1–1，另一个管 4–4，再一个管 6–6） - 放弃
colgroup，改用 CSS 列选择器：td:nth-child(1), th:nth-child(1) { ... }—— 更灵活，但注意nth-child是按单元格位置算，不是按col定义顺序
如果表格有 rowspan/colspan，nth-child 依然可靠；而 colgroup 在复杂合并场景下极易错位，此时 CSS 是更稳的选择。
col 样式优先级低，很多 CSS 属性根本不生效
col 元素只继承极少数样式：主要是 border、background、width 和 visibility。像 color、font-size、text-align 这类文本样式，写在 col 上完全无效 —— 浏览器直接忽略。
真正生效的写法示例：
<colgroup> <col span="2" style="background: #f0f0f0; width: 120px;"> <col style="border-left: 2px solid #333;"> </colgroup>
但如果你写了 style="color: red;"，别指望文字变红；想调字体，必须写在 td/th 或其父级 tbody/thead 上。
IE 和旧版 Safari 对 col 的 span 支持不稳定
IE11 及更早版本中，col 的 span 在嵌套表格或动态插入行后容易错位；Safari 13.1 之前对 col 的 background 渲染有闪烁问题。
兼容性兜底建议：
- 所有关键列宽控制，同时用
col的width+td的min-width双保险 - 背景色等视觉样式，优先用
tbody td:nth-child(n)实现，col仅作辅助 - 避免在
col上设置transition或动画，它们基本不触发重绘
实际项目里，colgroup 最适合做“列宽锚定”和“基础边框/背景”，精细样式控制交给 CSS 选择器更省心。很多人卡在“为什么加了 style 没反应”，其实是误判了 col 的能力边界。
