结论：+仅定义列范围，真正稳定生效的列样式必须用nth-child()配合结构；span不控制样式，只声明作用列数，且的多数CSS属性因替换元素特性而不可靠。
直接说结论：用 <colgroup></colgroup> + <col span="N"> 可以声明列组，但真正能稳定生效的列级样式，必须靠 nth-child() 配合结构来写；span 本身不控制样式，只定义作用范围。
为什么给 <col> 加 style 或 class 常常“看起来有效”却不可靠
浏览器渲染时，<col> 是替换元素（replaced element），它的样式继承链被截断。常见现象包括：
-
background-color在部分浏览器里对整列生效，但只要某一行的<td> 有自身背景色，就会覆盖掉 <li> <code>color、font-size、border几乎从不生效 -
text-align在旧版 IE 中可能起效，Chrome/Firefox/Safari 当前版本基本忽略 - 写了
<col class="highlight">，再在 CSS 里写.highlight { width: 200px; }，width 能生效，但其他属性大概率白写 -
<col>不写span，默认span="1" - 多个
<col>的span值加起来，应等于表格总列数（否则最后几列可能没被覆盖） -
span不支持小数、百分比或 CSS 单位，只能是整数
span 属性到底管什么：它只决定 <col> 影响哪几列，不决定样式内容
span 是纯结构性属性，值为数字，表示该 <col> 元素“覆盖接下来多少列”。它不参与样式计算，也不改变 DOM 结构——没有新增节点，也不影响 <th>/</th>
<td> 的索引顺序。
<ul>
<li>
<code><col span="2"> 表示这个 <col> 对应表格中连续的两列（比如第1列和第2列）
真正靠谱的列样式写法：用 nth-child() 锚定列位置
这是目前唯一跨浏览器稳定、可预测、可维护的方式。关键点在于：用 <col> 的 span 和 id 做语义标记，再用 CSS 定位对应列范围。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 先结构化声明：
<colgroup> <col span="2" id="name-contact"> <col span="3" id="address-cols"> </colgroup> - 再写 CSS，用
nth-child()匹配列序号：th:nth-child(-n+2), td:nth-child(-n+2) { background: #eef; } - 避免用
nth-of-type()：因为<th> 和 <code><td> 是不同标签，序列会中断 <li>如果表格有固定列头（<code><thead>）和滚动体（<code><tbody>），必须同时给两者写规则，否则样式只在一部分生效 <h3>性能与兼容性提醒：别迷信 <code><colgroup></colgroup>能加速渲染有人以为提前写
<colgroup></colgroup>能让浏览器“预知列宽、加快布局”，这在现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）中基本无效。实际测试表明：- 表格渲染瓶颈通常在 DOM 节点数量或 JS 绑定上，不在列声明顺序
-
<colgroup></colgroup>对无障碍（screen reader 读列信息）和 JS 控制列宽（如document.querySelector('col').style.width）仍有价值 - 若你用的是虚拟滚动表格（如
react-window或vue-virtual-scroller），<colgroup></colgroup>几乎无存在感——列宽由 JS 动态计算并注入内联 style
最易被忽略的一点：哪怕你用了
span和nth-child()，只要某列中某个<td> 写了 <code>style="background: red"，它就一定会盖过列级样式。列样式本质是“最低优先级的默认值”，不是强制覆盖层。
