calc() 在 table-layout: fixed 下需通过 <col> 或 <thead><tr><th> 设置 width 才生效，<td> 上的 calc() 会被忽略；须确保 <col> 顺序数量匹配、表格有显式宽度，注意 IE 和旧 Safari 兼容性问题。
calc() 在 table-layout: fixed 下失效怎么办
直接用 calc() 设置 <td> 或 <th> 的 width，在默认 table-layout: auto 时几乎没效果——浏览器会优先按内容撑开列宽，calc() 被忽略。必须显式设 table-layout: fixed，且 <col> 或表头第一行的 <th> 需定义宽度，后续单元格才受控。
常见错误现象：width: calc(100% - 200px) 写在 <td> 上，但列宽依然随文本伸缩；控制台看不出报错，但渲染完全不生效。
- 只对
<col>元素或<thead><tr><th>设置width才有效，<td>上的width在fixed模式下会被忽略 -
<col>必须放在<table>内、<thead>前，顺序和数量必须与实际列严格对应 - 若用
<th>定宽，需确保该行所有<th>都有明确width（哪怕写auto），否则整行宽度计算会退回到auto模式
用 calc() 分配固定总宽下的多列比例
比如总宽 800px，想让三列分别为 200px、剩余空间均分的两列（即各占 calc((800px - 200px) / 2)）。不能直接写 calc((100% - 200px) / 2) ——百分比在 <col> 中解析为父容器宽（通常是表格本身），但表格宽可能未显式设定，导致结果不可靠。
更稳的做法：给 <table> 设固定宽（如 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>，建议窄列加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;控制溢出，避免破坏布局
IE 和旧版 Safari 对 calc() in <col> 的兼容性陷阱
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 结构控制和少量脚本补位。
