table-layout: fixed 是解决表格换行挤压的启动开关，但必须配合 显式列宽、white-space: normal 和 overflow-wrap: break-word 才生效；常见失效原因包括未设 fixed 导致断词无边界、td 的 white-space 被覆盖为 nowrap、缺少 width/max-width 约束，以及 缺失或数量不匹配。
table-layout: fixed 是解决表格换行挤压的启动开关，但只设它没用——必须配合 <colgroup></colgroup> 显式列宽、white-space: normal 和 overflow-wrap: break-word 才真正生效。
为什么加了 overflow-wrap: break-word 还是撑开表格
常见错误现象：td 里塞了 URL 或 base64 字符串，样式写了 overflow-wrap: break-word，但整列还是被拉宽、其他列缩成一条线。根本原因不是属性漏写，而是：
-
table没设table-layout: fixed，浏览器仍按auto模式“猜”列宽，断词无边界可依 -
td的computed white-space实际是nowrap（常被 Bootstrap、Tailwind 或重置 CSS 覆盖） -
td没明确宽度约束（width或max-width），换行计算根本不会触发 -
table嵌在display: flex容器里，且没给table加min-width: 0，flex 默认锁死收缩
怎么让第二列换行、其他列保持紧凑
全局设 white-space: normal 会破坏 ID、状态、操作按钮等列的视觉节奏。正确做法是分离控制：
- 用
width: max-content; max-width: 800px控制外层容器（比如body或.table-wrapper），让表格宽度由内容自然驱动 - 对目标列精准选择：
td:nth-child(2)设white-space: normal; overflow-wrap: break-word; - 对不许换行的列（如第一列序号、最后一列按钮）加
white-space: nowrap;并配padding防挤 - 避免用
table-layout: fixed——它会让所有列宽度绑定首行，后续内容变化时失去弹性
<colgroup></colgroup> 少一个 <col> 就静默失效
这是最容易被忽略的硬性前提：<colgroup></colgroup> 必须存在，且 <col> 数量必须和实际每行 td 总数严格一致（包括 colspan 合并后的逻辑列数）。否则：
立即学习“前端免费学习笔记（深入）”；
- 少一个
<col>，对应列宽失控，DevTools 里computed width显示auto，但不报错 -
<col>必须紧贴<table> 开始后第一行，不能放在 <code><thead> 后面 <li> <code><col>的style="width: 120px"只在table-layout: fixed下生效；width: auto在任何情况下都无效 - 图片类单元格必须额外加
max-width: 100%，否则无视列宽直接突破
最麻烦的不是写不对，而是它不报错——列宽崩了，你得手动打开 DevTools 一列列点开 computed 样式查 width 值，确认每个 <col> 是否真正接管了列宽。
