table-layout: fixed 未锁住列宽的根本原因是只控制列宽分配，不处理内容换行；必须同时设置 table 宽度、col 或首行 width，并配合 word-break/overflow-wrap 控制长文本溢出。
table-layout: fixed 为什么没锁住列宽
根本原因不是 table-layout: fixed 失效，而是它只管“列怎么分”，不管“内容怎么折”。只要单元格里塞进一长串无空格文本（比如 https://example.com/very/long/path/with/no/spaces 或 Base64 字符串），哪怕列宽已由 <col width="120"> 定死，内容仍会横向溢出、视觉上“撑开”列——实际列宽没变，但文字跑出去了。
Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。
必须同时满足三个条件才真正可控：
<table> 元素必须有明确的 <code>width（如width: 100%或width: 600px），否则fixed行为不可靠- 列宽基准要来自
<col>或第一行<th>/</th> <td> 的 <code>width，后续行设width会被忽略 -
td或th必须显式加换行控制，table或tr上加无效 - 后台管理表格、日志查看页 → 用
word-break: break-all - 面向用户的报表、消息列表 → 优先
overflow-wrap: break-word，再 fallbackword-break: break-all - 必须写全兼容写法：
word-break: break-all; overflow-wrap: break-word; word-wrap: break-word;（word-wrap是废弃别名，但 IE/Safari 旧版本仍依赖它） -
table { min-width: 0; }—— 最轻量，推荐 -
table { width: 0; min-width: 100%; }—— 更激进，强制它尊重父容器边界 - 没设
<col>或首行width→ 列宽未锁定 →td实际宽度 > 你预期的宽度 →ellipsis不触发 -
td上同时写了white-space: nowrap和word-break: break-all→ 冲突，后者被前者压制 - 父容器是 Flex/Grid 且没加
min-width: 0→td宽度计算错误 → 截断点错位
word-break: break-all 和 overflow-wrap: break-word 怎么选
对纯英文/数字/URL/哈希值这类无空格长串，word-break: break-all 更可靠：它会在任意字符间断行，包括中文字符之间，适合后端日志、API 响应体等技术场景。
overflow-wrap: break-word（旧名 word-wrap: break-word）更保守：只在必要时打断单词，优先保持单词完整性，中英文混合排版更自然。但遇到连续 50 个 a 这种情况，可能不触发换行。
立即学习“前端免费学习笔记（深入）”；
实操建议：
Flex/Grid 容器里 table 不收缩？检查 min-width
把 <table> 放进 <code>display: flex 或 display: grid 的父容器时，即使写了全套样式，表格仍可能“倔强地撑满内容宽度”——这不是 bug，是 Flex Item 默认 min-width: auto 在起作用。
解决方法只有两个，任选其一：
漏掉这步，table-layout: fixed 就像没装保险丝的电路，看着通电，一加载长内容就跳闸。
white-space: nowrap 导致 text-overflow: ellipsis 失效
想用省略号截断单行文本？不能只写 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，还得确保父级容器（td）本身有固定宽度，且该宽度被 table-layout: fixed 真正锁定。
常见失效链：
复杂点在于：这些属性必须逐层对齐。一个环节松动，整条链就断。最易被忽略的是 min-width: 0 和 <col> 的存在性——它们不报错，但缺一不可。
