table-layout: fixed 下 td 被长字符串撑破，是因为该属性仅按声明宽度分配列宽，不控制内容换行；需同时设置 white-space: normal 和 overflow-wrap: break-word，并确保 col 使用 style="width: 120px" 正确声明宽度。
table-layout: fixed 开启了，列宽也设了，但一放长 URL 或中文连续字符串，<td> 还是被顶破——这不是 bug，是文本行为没管住。
<h3>为什么 fixed 布局下 <code><td> 还是撑开？
<p>根本原因是：<code>table-layout: fixed 只负责“按你给的宽度切列”，不负责“内容怎么排”。只要单元格里有无空格长串（比如 https://example.com/very-long-path-with-no-spaces 或 xxxxxxxxxxxxxxxxxxxxxx），默认 white-space: normal 也拒绝换行——浏览器会把它当一个不可分割的“词”往外顶。
常见错误现象：
- 开发者工具里看到
<td> 计算宽度远超 <code><col>声明值 - 明明写了
style="width: 120px"，实际渲染却 200px+ - 加了
word-wrap: break-word没反应——大概率被框架样式覆盖了white-space -
td { white-space: normal; }—— 解除换行封锁 -
td { overflow-wrap: break-word; }—— 安全断词（比word-break: break-all强，不会把“订单号”切成“订”“单”“号”） - 如果要单行省略，改用：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但前提是该<td> 已有明确宽度（来自 <code><col>或width）<col>的 width 写法容易错<col width="120">在所有现代浏览器中已失效，它不报错，但也不生效。你看到列宽没锁住，十有八九栽在这儿。必须用 CSS style：
- ✅ 正确：
<col style="width: 120px"> - ✅ 正确：
<col style="width: 25%">（但要求<table> 有明确 <code>width，如width: 100%） - ⚠️ 注意：
<colgroup></colgroup>必须是<table> 的直接子元素，不能塞在 <code><thead> 里 <h3>固定列宽三要素缺一不可</h3> <p>只做其中一两步，<code><td> 依然会撑破： <ul><li><code><table style="table-layout: fixed; width: 100%"> —— <code>table-layout: fixed必须显式写在<table> 上，且 <code>width不能省 -
<col style="width: 120px">或第一行<th>/<code><td> 带 <code>width—— 提供列宽依据 -
td { white-space: normal; overflow-wrap: break-word; }—— 管住内容溢出行为
漏掉任意一条，fixed 就退化成 auto，内容一长，列宽就“活”过来。
- ✅ 正确：
white-space 和 overflow-wrap 必须配对用
单设 overflow-wrap: break-word 不起作用，前提是 white-space 得允许换行。很多 UI 库（如 Bootstrap 4+）或重置 CSS 默认给 <td> 加了 <code>white-space: nowrap，直接锁死换行逻辑。
立即学习“前端免费学习笔记（深入）”；
正确做法（必须同时写）：
