可行，但需满足table-layout: fixed、显式宽度、首行th/td绑定变量及强制重绘；col元素不支持CSS变量，仅th/td在fixed布局下响应变量。
直接用 CSS 变量控制表格列宽是可行的，但必须绕开 col 元素的限制，并配合 table-layout: fixed 和显式重绘机制——否则变量改了，列宽纹丝不动。
为什么 col 上写 width: var(--w) 无效
col 元素不响应 CSS 变量，也不支持伪类、style 属性或计算值。它只认内联 width（如 <col width="120">）或 colgroup 中硬编码的宽度。试图给 col 设 width: var(--col-name-width)，浏览器会静默忽略。
真正能响应变量的，是 th 和 td 的 width 声明，但前提是：
-
table必须设table-layout: fixed -
table必须有明确宽度（如width: 100%） - 变量需作用于第一行的
th或td（因为fixed模式下，列宽由首行决定）
正确绑定变量的写法：用 class + var() + table-layout: fixed
把每列打上语义化 class（如 .col-id、.col-title），再在 CSS 中用变量驱动宽度：
立即学习“前端免费学习笔记（深入）”；
/* 在 :root 或组件 scope 定义 */
:root {
--col-id-width: 80px;
--col-title-width: 25%;
}
<p>/<em> 表格基础布局 </em>/
table {
table-layout: fixed;
width: 100%;
}</p><p>.col-id { width: var(--col-id-width); }
.col-title { width: var(--col-title-width); }</p><p>/<em> 同时作用于表头和数据行 </em>/
th.col-id, td.col-id { width: var(--col-id-width); }
th.col-title, td.col-title { width: var(--col-title-width); }注意：必须为 th 和 td 同时设置，且确保第一行单元格有对应 class；否则变量值不会参与列宽计算。
改完变量后列宽不更新？这是渲染机制卡点
table-layout: fixed 的列宽在首次 layout 后固化，CSS 变量变更本身不会触发重排。常见“改了没反应”本质是没强制重绘。
可靠做法（按推荐度排序）：
- 临时切换
display：table.style.display = 'none'; table.offsetHeight; table.style.display = 'table'; - 加一个无意义 class 触发样式重算：
table.classList.toggle('force-repaint')，配合transition: width 0s - 避免用
offsetWidth触发——在部分 Chrome 版本中对table失效 - 若用 Vue/React，确保变量更新发生在 DOM 渲染后（如
nextTick或useEffect的 deps 更新后）
单位选错会让响应式失效，尤其要注意百分比与像素混用
用变量传百分比（如 --col-title-width: 35%）没问题，但所有列百分比之和不能超 100%，否则最后一列会被压缩到最小内容宽；传像素（如 --col-id-width: 100px）则适合固定长度字段（ID、状态图标等）。
混合单位（比如 100px 2fr 1fr）在原生 table 中不支持——fr 是 Grid 专属单位。真要弹性分配，得换用 display: grid，而不是硬套在 table 上。
真正容易被忽略的是：变量只是入口，起效靠的是它和 table-layout: fixed 的生效边界、首行结构、以及重绘时机三者的咬合。漏掉任一环，就只是改了个寂寞。
