col标签需配合table-layout: fixed才能固定列宽；单独设width无效，且col的width属性已废弃，必须用CSS的style或class设置，span仅作用于起始列，colgroup须为table直接子元素。
col 标签本身不能“固定”列宽，它只是定义列的样式占位；真正起作用的是 table-layout: fixed + col 的 CSS width 值组合。不加 table-layout: fixed，哪怕每个 col 都写了 style="width: 120px"，浏览器仍可能按内容撑开，列宽就“不固定”。
col 标签必须配合 table-layout: fixed 才有效
这是最容易被跳过的一步，也是列宽“看起来设了却没用”的根本原因：
-
table-layout: auto（默认）：浏览器先读取所有单元格内容，再动态分配列宽 —— 此时col的width只是参考，常被忽略 -
table-layout: fixed：浏览器只看col宽度（或第一行th/td）就确定列宽，后续内容超出会截断或换行，列宽才真正“固定” - 必须写在
<table>元素上，例如：<table style="table-layout: fixed; width: 100%"> - 如果表格嵌套在响应式容器里，
width: 100%是安全选择；若需像素级精确，直接写width: 800px
col 的 width 属性已废弃，必须用 CSS style 或 class
HTML5 明确废弃了 <col width="120"> 这种写法，现代浏览器静默忽略，不会报错但也不生效：
- ❌ 错误：
<col width="120">—— 无论 Chrome/Firefox/Safari 都不认 - ✅ 正确：
<col style="width: 120px">—— 行内最简，适合单次使用 - ✅ 推荐：
<col class="col-name">+.col-name { width: 120px }—— 便于复用和主题切换 - 百分比值也合法：
style="width: 25%"，但前提是<table>有明确宽度（见上一条）
span="n" 不是“让 n 列都变宽”，而是“从当前列开始占 n 个位置”
很多人以为 <col span="3" style="width: 150px"> 能让三列都变成 150px 宽，实际不是：
-
span只控制该col元素“覆盖多少列”，但它的样式**只作用于第一列**（即该col对应的起始列） - 后两列不会继承这个宽度，会回退到默认行为（内容撑开或由下一个
col控制） - 要让三列等宽，得写三个独立
col：<col style="width: 150px"><col style="width: 150px"><col style="width: 150px"> - 如果列数动态生成（比如后端返回字段列表），就不能靠手写
col，得用 JS 插入对应数量的col元素，否则列数对不上，最后一列永远没样式
colgroup 放错位置，整个设置就白写了
colgroup 必须是 <table> 的**直接子元素**，且顺序严格：
- ✅ 正确位置：
<table><caption>...</caption><colgroup>...</colgroup><thead>...</thead><tbody>...</tbody></table> - ❌ 常见错误：
<tbody><colgroup>...</colgroup></tbody>或<tr><colgroup>...</colgroup></tr> - 放错位置不会报错，DevTools 里
colgroup可能显示为灰色或不渲染样式，调试时务必检查 Elements 面板中它是否出现在<table>下第一层 - 如果用了框架（如 Vue/React），注意模板编译后是否意外包裹了额外标签，导致
colgroup脱离table直接子级关系
真正难处理的不是怎么写一个静态的 col，而是当列数由数据驱动、或需要适配不同屏幕时，如何保证 colgroup 中 col 的数量、顺序、宽度值与实际渲染出的 th/td 列严格一一对应 —— 少一个，末列失控；多一个，冗余且干扰调试。
