直接用 width 在响应式表格中失效，是因为 th 和 td 宽度需同步计算，而浏览器默认独立处理；必须配合 CSS 变量 + table-layout: fixed 才能实现列宽一致。

为什么直接用 width 在响应式表格里会失效

表头（）和数据单元格（）在不同断点下宽度不一致，本质是因为浏览器渲染时：表头行和数据行是独立计算的；媒体查询改了 th 的 width，但 td 没同步，自动撑开或收缩，列就错位了。CSS 变量本身不触发重排，但能被所有选择器读取——这才是同步宽度的关键。

用 :root 声明变量并让 th 和 td 共享

必须把变量定义在顶层作用域，否则子元素无法继承或跨选择器复用。不要写在某个 class 里，也不要只给 th 设变量再靠继承传下去——td 通常不在同一 DOM 层级，继承链断了。

正确做法：

:root {
  --col-1-width: 120px;
  --col-2-width: 200px;
  --col-3-width: auto;
}
<p>table th:nth-child(1), table td:nth-child(1) {
width: var(--col-1-width);
}
table th:nth-child(2), table td:nth-child(2) {
width: var(--col-2-width);
}
table th:nth-child(3), table td:nth-child(3) {
width: var(--col-3-width);
}</p>

• 变量名用语义化前缀（如 --col-1-width），避免后期维护时猜用途
• 每个列宽单独声明变量，别用数组式命名（--col-widths）——CSS 不支持变量内插值或索引访问
• 必须显式给 th 和对应序号的 td 同时赋值，不能只设 th 再指望 table-layout: fixed 自动对齐

在媒体查询里动态改变量值，而不是改样式规则

很多人在 @media 里重复写一遍选择器 + width，结果漏掉某类元素，或者新增列时忘了同步。更稳的方式是只改变量值，让所有已绑定该变量的地方自动响应。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

@media (max-width: 768px) {
  :root {
    --col-1-width: 80px;
    --col-2-width: 140px;
    --col-3-width: 1fr;
  }
}

• 1fr 可以替代 auto 实现弹性分配，但仅在 table-layout: fixed 下有效；若用 auto，小屏下可能因内容过长导致横向滚动
• 不要在媒体查询里覆盖整个选择器块（比如重写所有 th/td 的 width），冗余且易出错
• 变量值支持 CSS calc()，比如 --col-1-width: calc(100vw - 400px)，但注意单位一致性（别混用 px 和 rem）

必须加 table-layout: fixed，否则变量没用

CSS 变量只是“值容器”，真正让列宽强制对齐的是渲染模式。table-layout: auto（默认）下，浏览器优先按内容宽度计算，变量设置的 width 会被忽略或仅作最小宽度参考。

• 在 元素上直接设 table-layout: fixed，不是 th 或 td
  加了 fixed 后，第一行 th 的宽度决定整列表格列宽，所以务必确保第一行的 th 也绑定了变量
  如果表格有 colgroup，它会覆盖 th/td 的 width，此时变量需设在 col 上，而非 th

  最常被跳过的一步：忘了给 table 加 table-layout: fixed，变量设得再准，列还是歪的。

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