table-layout: fixed 必须配合显式列宽（如<col>或首行th/td的width）和word-break/overflow-wrap断行策略才能控列防撑破；单独使用无效，因fixed仅启用固定布局模式，无宽度基准则无法计算列宽。
table-layout: fixed 必须配合显式列宽和 word-break 才能真正控列、防撑破——光写 table-layout: fixed 几乎没用，浏览器仍可能把整行空间全分给一列，尤其遇到长 URL 或 Base64 字符串时。
为什么 table-layout: fixed 单独写不生效
浏览器默认用 table-layout: auto，会扫描全部内容后才决定列宽；table-layout: fixed 虽强制按第一行或 <col> 宽度切列，但若没给任何宽度基准，它就“无从下手”：
-
<table>缺少明确width（如width: 100%或width: 800px）→ fixed 行为不可靠 - 没设
<col>或第一行<th>/<td>的width→ 列宽均分，但均分结果无法预测，尤其在响应式容器里 - 后续行的
width属性被忽略，只认第一行或<col>—— 这是 fixed 的设计逻辑，不是 bug
必须设置的三类宽度约束
要让列宽真正可控，得同时满足以下任意一种组合：
- 给
<table>设width+ 给第一行每个<th>或<td>设width（像素或百分比） - 给
<table>设width+ 插入<col>标签并设width（推荐，语义清晰） - 用 CSS 类统一控制列：例如
td.id-col { width: 120px; }，但需确保该类出现在第一行单元格上
注意：max-width 在部分旧版 Safari 中对 <td> 无效，优先用 width；百分比值需以父容器有明确宽度为前提。
立即学习“前端免费学习笔记（深入）”；
word-break 和 overflow-wrap 怎么选、怎么加
这些断行属性必须加在 <td> 或 <th> 上，加在 <table> 或 <tr> 上无效。区别很实际：
-
word-break: break-all：强行在任意字符间断（包括中文汉字之间），适合日志 ID、哈希、纯数字字段 -
overflow-wrap: break-word（旧名word-wrap: break-word）：只在必要时打断长单词，保留英文单词完整性，中英文混合更自然 - Firefox/Safari 旧版本需同时写
word-break: break-all和overflow-wrap: break-word才稳定生效
示例写法：
td.log-id {
width: 160px;
word-break: break-all;
overflow-wrap: break-word;
}
移动端和 Flex/Grid 嵌套表格的特殊处理
当 <table> 放在 display: flex 或 display: grid 容器里时，容易因 flex item 默认 min-width: auto 导致 fixed 失效：
- 必须给
<table>加min-width: 0，否则它会拒绝压缩，撑破父容器 - 某些 iOS Safari 版本对
table-layout: fixed+ 百分比列宽支持不稳定，建议 fallback 到固定像素宽度或 JS 动态计算 - 如果表格只是用来布局（非语义化数据表），直接换用 Flex/Grid 更可靠，
<table>在现代 UI 中已非首选
最易被忽略的一点：所有宽度控制都依赖「第一行」或 <col> 的存在。删掉第一行、或用 JS 动态渲染却忘了初始化首行宽度，fixed 就会退化成 auto —— 这个坑没有报错，只有视觉异常。
