table-layout: fixed 能控制单元格宽度，因其按第一行或显式 width 划分列宽，避免后续长内容撑开整列；但需配合 table 宽度、col/第一行 width 及 td 的 word-break 与 white-space 才生效。
table-layout: fixed 为什么能控制单元格宽度
默认的 table-layout: auto 会让浏览器遍历所有内容后才决定列宽，一旦某行有超长无空格文本（比如一长串 URL 或 Base64），整列就会被撑开，连带影响其他行和容器宽度。table-layout: fixed 则强制按第一行（或显式设置的 width）划分列宽，后续行内容超出时不会反向改变列宽，这是可控性的前提。
但仅设 table-layout: fixed 不够——它只管“列怎么分”，不管“内容怎么折”。所以必须配合内容截断或换行策略。
- 必须给
<table> 设置明确的 <code>width（如width: 100%或具体像素值），否则fixed行为不可靠 -
<col>或第一行<th>/</th> <td> 的 <code>width值会成为列宽基准，没设则均分 - 后续行单元格的
width属性会被忽略，以第一行为准 - 含正常中文段落时，优先用
overflow-wrap: break-word，避免把“你好世界”拆成“你好世
界” - 搭配
white-space: normal（默认值），确保换行生效；若设了white-space: nowrap，上述 break 都无效
word-break: break-all 和 overflow-wrap: break-word 的区别
两者都用于处理长单词溢出，但触发逻辑不同：word-break: break-all 会强行在任意字符间断行（包括中文字符之间），适合纯技术场景；overflow-wrap: break-word（旧名 word-wrap: break-word）只在必要时打断长单词，优先保持单词完整性，对中英文混合更友好。
注意：这些属性要加在 <td> 或 <code><th> 上，不是 <code><table> 或 <code><tr>。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>对纯数字/URL/哈希值等无空格字符串，<code>word-break: break-all 更可靠
为什么加了 fixed 和 break 还是撑破？常见漏掉的三处
实际调试中，多数失效不是配置错，而是被其他样式覆盖或遗漏约束条件：
- 父容器（如
<div>）缺少 <code>width或max-width，导致表格自身宽度失控 <td> 内嵌了 <code><div>、<code><span></span>等块级/弹性子元素，它们默认不继承word-break，需单独设置- CSS 优先级问题：比如框架样式（如 Bootstrap 的
.table td）可能重置了white-space或overflow，用devtools检查计算值是否真为normal和break-word
一个最小验证组合：
table {
table-layout: fixed;
width: 100%;
}
td {
word-break: break-all;
white-space: normal;
overflow: hidden;
}
要不要加 overflow: hidden 和 text-overflow: ellipsis
加 overflow: hidden 是安全兜底，防止极少数渲染异常导致内容溢出边框；但 text-overflow: ellipsis 在 <td> 上基本无效——它只对单行块元素生效，而表格单元格是匿名表格盒，不支持该属性。强行加也不会出现省略号。
<ul><li>需要省略号效果，得把内容包进 <code><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">，再设 <code>width 和 max-width
overflow: hidden 推荐加上，尤其当单元格内有图标、按钮等浮动元素时table-layout: fixed 的兼容性较好，但某些老版本 Android WebView 可能忽略 word-break，可补 hyphens: auto 作弱降级真正难处理的是动态内容+响应式表格——列宽基准（第一行）和内容长度随时变化，这时 fixed 布局反而容易失衡，得退回到 auto + max-width + min-width 组合控制，而不是硬套 break-all。
