直接用 width 在响应式表格中失效，是因为 th 和 td 宽度需同步计算，而浏览器默认独立处理；必须配合 CSS 变量 + table-layout: fixed 才能实现列宽一致。
为什么直接用 width 在响应式表格里会失效
表头（<th>）和数据单元格（<code><td>）在不同断点下宽度不一致，本质是因为浏览器渲染时：表头行和数据行是独立计算的；媒体查询改了 <code>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);
}- 变量名用语义化前缀（如
--col-1-width），避免后期维护时猜用途 - 每个列宽单独声明变量，别用数组式命名（
--col-widths）——CSS 不支持变量内插值或索引访问 - 必须显式给
th和对应序号的td同时赋值，不能只设th再指望table-layout: fixed自动对齐
在媒体查询里动态改变量值，而不是改样式规则
很多人在 @media 里重复写一遍选择器 + width，结果漏掉某类元素，或者新增列时忘了同步。更稳的方式是只改变量值，让所有已绑定该变量的地方自动响应。
立即学习“前端免费学习笔记（深入）”；
@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> 元素上直接设 <code>table-layout: fixed，不是th或td - 加了
fixed后，第一行th的宽度决定整列表格列宽，所以务必确保第一行的th也绑定了变量 - 如果表格有
colgroup，它会覆盖th/td的width，此时变量需设在col上，而非th
最常被跳过的一步：忘了给 table 加 table-layout: fixed，变量设得再准，列还是歪的。
