calc() 在 table-layout: fixed 下需通过 或 设置 width 才生效， 上的 calc() 会被忽略；须确保 顺序数量匹配、表格有显式宽度，注意 ie 和旧 safari 兼容性问题。
calc() 在 table-layout: fixed 下失效怎么办
直接用 calc() 设置 <td> 或 <code><th> 的 <code>width，在默认 table-layout: auto 时几乎没效果——浏览器会优先按内容撑开列宽，calc() 被忽略。必须显式设 table-layout: fixed，且 <col> 或表头第一行的 <th> 需定义宽度，后续单元格才受控。<p>常见错误现象：<code>width: calc(100% - 200px) 写在 <td> 上，但列宽依然随文本伸缩；控制台看不出报错，但渲染完全不生效。<ul><li>只对 <code><col> 元素或 <thead><tr><th> 设置 <code>width 才有效，<td> 上的 <code>width 在 fixed 模式下会被忽略
<col> 必须放在 <table> 内、<code><thead> 前，顺序和数量必须与实际列严格对应<li>若用 <code><th> 定宽，需确保该行所有 <code><th> 都有明确 <code>width（哪怕写 auto），否则整行宽度计算会退回到 auto 模式用 calc() 分配固定总宽下的多列比例
比如总宽 800px，想让三列分别为 200px、剩余空间均分的两列（即各占 calc((800px - 200px) / 2)）。不能直接写 calc((100% - 200px) / 2) ——百分比在 <col> 中解析为父容器宽（通常是表格本身），但表格宽可能未显式设定，导致结果不可靠。
更稳的做法：给 <table> 设固定宽（如 <code>width: 800px），然后用 calc() 基于绝对单位运算：
<col width="200"><col width="calc((800px - 200px) / 2)"><col width="calc((800px - 200px) / 2)">
注意：width 属性值支持 calc()，但仅限 CSS 中的 width（不是 HTML width 属性）；所以必须用内联 style 或 CSS 类：
<col style="width: calc((800px - 200px) / 2);">
响应式场景下 calc() 与 minmax() 的取舍
想让一列最小 120px、其余空间自适应？别用 calc() 拼 min-width + width，它不解决弹性分配问题。CSS Grid 能用 minmax(120px, 1fr)，但原生表格不支持 fr 单位。
表格里真正可行的方案只有两种：
- 用
width: calc(100% - 120px)给主列，再配min-width: 120px给窄列（但窄列内容超长时仍会撑开整列） - 放弃纯 CSS 表格，改用
display: table-cell+display: table的 div 模拟，此时可结合flex或grid布局，calc()才能配合minmax()真正生效 - 若必须用语义化
<table>，建议窄列加 <code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis;控制溢出，避免破坏布局IE 和旧版 Safari 对 calc() in
的兼容性陷阱 IE11 支持
calc()，但不支持在<col>的width中使用（会当无效值丢弃）；iOS Safari ≤ 13.3 对calc()在<col>中的支持也不稳定，尤其含除法时容易回退到 0 宽。实操建议：
- 对兼容性要求高的项目，用 JS 动态计算列宽并写入
<col>的style.width，绕过 CSS 解析差异 - 避免在
calc()中嵌套过多运算，如calc(((100% - 20px) / 3) - 10px)，旧引擎易出错；拆成两步：先设容器宽，再用简单减法 - 用
@supports (width: calc(1px))做特性检测，但注意它无法判断<col>是否生效，只能作为基础兜底开关
表格列宽动态分配本质是和浏览器渲染层博弈，
calc()是工具，不是银弹；真正稳定的方案往往需要组合 CSS 约束、HTML 结构控制和少量脚本补位。 - 对兼容性要求高的项目，用 JS 动态计算列宽并写入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
