必须设置 table-layout: fixed，否则 word-break 等换行样式无效；它让列宽由 CSS 控制而非内容决定，需配合 table 明确宽度及统一列宽定义方式。
表格内容不换行、列宽被长文本撑开、左右两个表格对不齐——根本原因不是文字太长，而是 table 默认的 table-layout: auto 在起作用。必须显式设为 table-layout: fixed，否则其他换行样式基本无效。
为什么 table-layout: fixed 是前提
默认 table-layout: auto 会让浏览器遍历所有单元格内容来计算列宽，一旦某列出现超长英文/数字串（比如 UUID、日志 ID、base64 片段），整列就会被撑开，后续列全错位。而 table-layout: fixed 把列宽决策权交给 CSS：只看 table 宽度和 col / th / td 的 width（或百分比），完全忽略内容长度。
不加这句，word-break 和 white-space 很可能没机会生效——因为列宽已经“提前定死”且远超预期。
-
table-layout: fixed必须作用在<table>元素上，不能只写在<td>上 - 如果用百分比定义列宽（如
width: 25%），<table>自身必须有明确宽度（width: 100%或具体像素值） - IE8+ 支持该属性，现代浏览器无兼容问题；但注意它会禁用
<colgroup>的部分动态行为
word-break: break-all 和 overflow-wrap: break-word 怎么选
两者都解决“连续无空格字符串”换行，但触发逻辑不同：
立即学习“前端免费学习笔记（深入）”；
-
word-break: break-all：粗暴断字，英文单词中间也能切（如abcdefghijklmnop→abcd.../efgh...），适合后台 ID、哈希值等纯机械字符串 -
overflow-wrap: break-word（旧名word-wrap: break-word）：优先保持单词完整，只在实在放不下时才断开长单词，更适合用户可见的描述性文本 - 实际项目中常同时写：
word-break: break-all; overflow-wrap: break-word;，让浏览器按自身策略 fallback - 别用
white-space: nowrap——它直接关闭换行，和目标相反
对齐多个表格时容易漏掉的关键点
两个 <table> 看起来宽度一样，但渲染后列宽不一致？大概率是以下任一情况：
- 一个表用了
table-layout: fixed，另一个没加——必须两边都加，且table的width值严格一致（比如都是width: 100%或都是width: 600px） - 列定义方式混用：一个用
<col width="20%">，另一个靠<th>的width属性，或干脆没设任何宽度——统一用<col>或统一用th/td的width，不要交叉 - 边框、padding、border-collapse 不一致：
border-collapse: collapse必须两边都设，否则边框占位差异会导致视觉错位 - 字体、字号不同也会轻微影响列宽计算（尤其在
fixed模式下），建议全局统一样式
移动端适配和性能小提醒
在小屏幕设备上，固定布局 + 强制断字虽能防止撑破容器，但也可能造成阅读困难（比如把邮箱 user@example.com 断成三行）。可加一层响应式保护：
- 用媒体查询在窄屏下改用
word-break: keep-all+overflow-x: auto，让用户横向滚动查看完整内容 -
table-layout: fixed本身有轻微渲染优势（浏览器不用测量内容），但若表格行数极多（>1000 行），仍建议用虚拟滚动替代原生<table> - 避免在
<td>上写text-overflow: ellipsis——它需要white-space: nowrap和固定高度，与换行需求冲突；真要截断，请用 JS 动态控制或服务端预处理
真正卡住人的从来不是某个属性不会写，而是以为加了 word-break 就够了，却忘了 table-layout: fixed 这个开关根本没打开。
