colgroup 的 span 属性不能实现跨列边框，仅当 border-collapse: collapse 且浏览器支持时，col 的 border-left/right 可作列分隔线；批量列边框须用 nth-child 选择器控制单元格。
colgroup 的 span 属性本身不支持直接加边框
很多人试过给 <col span="2"> 加 border CSS，发现完全无效——这是浏览器规范决定的：<col> 元素只响应有限样式（主要是 border、background、width），且仅在表格有 border-collapse: collapse 时，border 才可能生效，但依然不能“批量控制列边框”。
真正能批量控制列边框的只有 CSS nth-child 或 col 伪类（需配合 border-collapse）
想给第 1–2 列统一加右边框，或者给奇数列加左边框，靠 span 不行，得用 CSS 定位列。关键前提是表格必须设 border-collapse: collapse，否则列级边框会被单元格自身边框覆盖或忽略。
<table style="border-collapse: collapse"> 是必要前提 <li>用 <code>td:nth-child(1), th:nth-child(1)控制第 1 列所有单元格（th和td都要写，否则表头没边框）- 若列数固定，可写
td:nth-child(-n+2), th:nth-child(-n+2)表示前两列 - 避免只写
td—— 表头th会漏掉，导致边框断层 - Chrome / Edge 支持
<col>上的border-left或border-right（仅在collapse模式下） - Firefox 基本忽略
<col>的border - 必须写成
<col style="border-right: 1px solid #ccc">，不能靠 class 或外部 CSS（部分浏览器不认） -
span属性在这里只是声明“这个<col>占两列”，但无法让 border 跨列渲染——它只作用于该<col>对应的列分隔位置，不是视觉上的连续边框
用 <col> + border 的唯一可行场景
只有当所有行高一致、且你只想给某列加「左侧」或「右侧」一条细线（不是完整边框），并且接受它只出现在行与行之间（即实际是列分隔线）时，<col> 的 border 才可能显示出来。但这依赖渲染引擎行为，兼容性差：
推荐做法：放弃 span 控制边框，改用类名 + nth-child
比如要给第 2、3 列加右侧边框，直接在 CSS 里写：
立即学习“前端免费学习笔记（深入）”；
table.my-table td:nth-child(2),
table.my-table th:nth-child(2),
table.my-table td:nth-child(3),
table.my-table th:nth-child(3) {
border-right: 1px solid #999;
}
如果列数多或动态变化，就别硬套 colgroup，老实用 JS 动态加 class 到对应 td/th 上更可靠。CSS 的列选择器本质是“选中单元格”，不是“选中列”，这点容易误解——边框永远画在单元格上，colgroup 只是辅助布局和宽度控制。
真正在意语义和维护性的话，colgroup 保留用于设置 width，边框交给 CSS 选中器，别指望 span 能帮你省代码。
