table-layout: fixed 是列宽可控的前提，否则 width 声明无效；启用后列宽由第一行决定，需配合 css 变量、重绘机制及单位选择才能动态控制。

table-layout: fixed 是列宽可控的前提

默认情况下，table 会按内容自动撑开列宽，width 设置常被忽略。想让 th 或 td 的 width 生效，必须先设 table-layout: fixed。否则所有列宽声明都只是“建议”，浏览器照旧按内容重排。

• 只对直接子元素 col、colgroup 或第一行 tr > th/td 的宽度起作用
• 一旦启用，整张表的列宽就由第一行决定，后续行单元格内容溢出不会影响列宽
• IE8+ 支持，但 Safari 早期版本对 col 宽度兼容性略差，建议优先用第一行 th 设宽

用 CSS 变量控制列宽要绕过 col 的限制

col 元素不支持伪类、不能写 style 属性，也无法响应 CSS 变量——它只认内联 width 或 colgroup 中的硬编码值。所以真要用变量驱动列宽，得换路径：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 在 :root 或组件级定义变量，例如 --col-name-width: 120px
• 给每列 th 和对应 td 加 class（如 .col-name），再用 width: var(--col-name-width)
• 务必配合 table-layout: fixed，否则变量值会被忽略
• 避免对 col 元素本身写 width: var(--x) —— 它不会生效

百分比 vs 像素宽度：不同场景下的取舍

列宽单位选错，会导致响应式失效或表格横向滚动。关键看数据是否固定长度、容器是否弹性：

• 后台管理列表常用固定像素（120px），配合 overflow: hidden; text-overflow: ellipsis 控制文本
• 报表类页面适合百分比（25%），但需确保所有列加起来 ≤100%，否则最后一列会被压缩
• 混合单位可行（如 1fr 2fr 100px），但必须用 display: grid 替代 table —— 原生 table 不支持 fr
• 移动端慎用 min-width，它在 table-layout: fixed 下可能被无视

动态改列宽时，JavaScript 需要触发重绘

单纯改 CSS 变量值，表格列宽不会自动重算。因为 table-layout: fixed 的列宽在首次渲染后已固化，变量变更不会触发 layout recalc。

• 最稳方案：改完变量后，临时设 table.style.display = 'none' 再切回 'table'
• 轻量方案：给 table 加个无意义的 class 切换（如 force-repaint），配合 transition: width 0s 强制重排
• 别用 offsetWidth 触发重排 —— 在某些 Chrome 版本中对 table 失效
• 如果用 Web Components 或框架（如 Vue），注意变量更新时机，避免在 mounted 前读取列宽

改列宽不是改个变量就完事，核心卡点永远在 table-layout: fixed 的生效边界和重绘机制上。变量只是入口，真正起效靠的是它和布局规则、渲染时机的配合。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！