col的span属性仅控制列数分配，不透传样式，只对width、background-color、visibility: collapse等极少数属性生效，且必须嵌套在table首个子元素的colgroup内，span总和须严格匹配实际列数。
不能靠 col 的 span 属性“统一配置整列样式”——它只控制宽度、背景色和隐藏，且必须配合 colgroup 严格使用，否则样式直接失效。
col span 是列数计数器，不是样式继承开关
span 只表示“这条 col 规则作用于接下来连续几列”，不改变结构，也不透传样式。它不是 CSS 类，不能把 font-size 或 color 批量打到单元格上。
-
<col span="3">表示第 1、2、3 列共用该col的width和background-color -
span="0或负数会被浏览器忽略，span="1"可省略为<col> - 多个
col的span总和必须等于表格实际列数，否则末尾列没样式接管
colgroup 必须放在 table 开头，且不能孤立存在
col 标签必须嵌套在 colgroup 内，且整个 colgroup 必须是 table 的第一个子元素（紧接在 table 开始标签后），否则解析时被跳过。
- 错误写法：
<table> <tr>...</tr> <colgroup><col span="2"></colgroup> </table>→col被忽略 - 正确位置：
<table> <colgroup><col span="2"></colgroup> <thead>...</thead>...</table> - 支持多个
colgroup，比如固定列一组、滚动列一组，但不能嵌套
哪些样式真能生效？别白设 color 和 border
col 支持的 CSS 属性极少，很多写了也无效，这是规范限制，不是浏览器 bug。
- ✅ 稳定生效：
width（优先级高于td）、background-color（但会被td自身背景覆盖）、visibility: collapse（整列隐藏） - ⚠️ 部分生效：
text-align在部分浏览器中表现不稳定，建议仍写在th/td上 - ❌ 完全无效：
color、font-size、border（Firefox 基本不认；Chrome/Edge 对左右边框仅有微弱视觉影响）
table-layout: fixed 下最容易掉坑
一旦启用 table-layout: fixed，列宽完全由 col 或第一行单元格决定，配置疏漏会立刻暴露。
- 某列没设
width，该列可能塌缩为 0（Safari 尤其明显） -
width: auto在col上无效，只能用具体值（px、%、em） - 百分比宽度依赖
table的显式width，没设table.width，width: 30%就没意义 - 动态渲染表格（如 React/Vue）时，
colgroup必须与列数实时同步，否则样式“漂移”
真正容易被忽略的是：你只要开始用 col 控制宽度，就别再在 td 上设 width——冲突时行为不可预测，不同浏览器结果可能完全不同。统一入口才可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
