col标签的span属性仅声明管辖列数，不直接控制宽度且不渲染；真正生效的是css对具体列的选择器样式，html width属性已废弃不可靠。
col 标签的 span 属性只能控制列数，不能直接设宽度
很多人误以为给 <col span="3"> 加 width 就能批量控制 3 列宽度，其实不行。<col> 的 span 只是声明“这个 <col> 规则覆盖接下来多少列”，它本身不渲染，也不继承样式；真正生效的是它后面紧跟的那些列（由 <col> 或 CSS 的 col:nth-child() 控制）。
常见错误现象：<col span="3" width="100px"> 在 Chrome 看似有效，但在 Firefox 或表格含 <colgroup></colgroup> 嵌套时失效——因为 width 属性在 HTML 中已被废弃，仅部分浏览器做兼容性支持，不可靠。
- 要用 CSS 控制列宽，优先写
col元素的width样式（不是 HTML 属性） -
span本身不占位、不可选中、无法用 JS 直接读取宽度，别试图用它做响应式计算 - 如果表格有动态列数，
<col>数量必须严格匹配实际列数，否则span会错位
批量设宽最稳的方式：用 CSS 选择器配 col 元素
HTML 中每个 <col> 对应一列，span 是“合并规则声明”，不是“合并渲染单元”。所以批量控制本质是：让多个 <col> 共享同一份 CSS 宽度声明。
示例：想让第 2～4 列统一宽 120px
<colgroup> <col> <col span="3"> <!-- 这里 span="3" 表示接下来 3 列（即 col2/col3/col4）共用这条规则 --><col> </colgroup>
对应 CSS：
col:nth-child(2) { width: 120px; }
col:nth-child(3) { width: 120px; }
col:nth-child(4) { width: 120px; }
或者更简洁（但注意兼容性）：
col:nth-child(n+2):nth-child(-n+4) { width: 120px; }
- 不要依赖
<col span="3">自动应用样式——它不会把 CSS 透传给被 span 覆盖的列 -
col元素没有 class，所以批量控制得靠:nth-child()或 JS 动态加类 - 如果列数不确定，用 JS 计算列索引再批量设置
style.width比硬写 CSS 更可靠
JS 批量改 col 宽度时，span 会让索引变难算
<col span="2"> 在 DOM 中仍只算一个节点，但它影响的是后续物理列的归属。比如：
<colgroup> <col> <!-- 第1列 --><col span="2"> <!-- 实际影响第2、3列 --><col> <!-- 第4列 --> </colgroup>
此时 document.querySelectorAll('col') 返回 3 个节点，但表格实际有 4 列。想给“第2～3列”设宽，不能简单按 col[1] 设置——它代表的是那个 span="2" 的 <col>，而它的 style.width 不会自动分发到第2、3列的渲染单元上。
- 安全做法：忽略
span，直接操作<table> 的 <code>cols集合或遍历<tr><td> 算列数<li>若必须用 <code>col元素，先展开span：遍历所有<col>，用span属性累加真实列索引映射 - Chrome DevTools 里右键检查
<col>看不到尺寸，要查 computed 样式里的width是否 applied 到对应列 - 别写
<col span="2"> <col width="80px"> <col span="2">——中间那个单列<col>会被后面span覆盖掉，第2列宽度由第二个<col span="2">决定 - 用
getComputedStyle(document.querySelector('col')).width查不到实际列宽，得查<td> 或用 <code>table.clientWidth / 列数估算 - Flex/Grid 布局下
<col>完全无效，表格结构必须用<table> 才能触发列计算逻辑<p>复杂点在于：你看到的“列宽”其实是 table layout algorithm 综合了 <code><col>、<td width>、内容撑开、CSS <code>min-width等多层约束后的结果，span只参与第一层映射，不参与计算。
真正起作用的是最后一层列定义，span 不叠加样式
如果有多个 <col> 重叠覆盖同一列（比如两个 <col> 都声称管第3列），浏览器只认最后一个生效的。也就是说：span 不是“合并配置”，而是“声明管辖范围”，最终每列只被一个 <col> 管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
