根本原因是未启用table-layout: fixed；浏览器默认table-layout: auto会根据内容（如长URL、无空格字符串）动态推算列宽，使width声明仅作参考而非约束，必须在<table>上显式设置table-layout: fixed并配合width（如100%）才能生效。
为什么加了 width 还是被内容撑开
根本原因是没启用 table-layout: fixed。浏览器默认用 table-layout: auto，它会扫描整张表所有单元格内容（包括长 URL、UUID、无空格字符串）来推算列宽，width 声明在这一阶段只是参考，不是约束。
即使你给 <td> 写了 style="width: 100px"，只要里面塞进 "a1b2c3d4e5f6g7h8i9j0" 这种长串，整列照样被拉宽——因为 auto 模式下，内容宽度具有最高优先级。
- 必须把
table-layout: fixed直接加在<table>元素上，写在父容器或 CSS 类里无效 -
table-layout: fixed不继承，也不能靠更宽泛的选择器覆盖（比如table.my-table可以，但.container table容易被其他规则干扰） - 仅设
table-layout: fixed不够，还得配width（如width: 100%或具体像素值），否则部分浏览器会退化回 auto 行为
列宽该设在 <col> 还是第一行 <td>/<th>
<col> 是最干净、最可控的方式。它在渲染前就定义列轨道，不依赖 DOM 结构，也不受内容、min-width 或重置样式干扰。
第一行 <th> 或 <td> 的 width 也能生效，但有风险：如果首行用了 colspan，或被某些 CSS 框架的通用样式覆盖（比如 th { width: auto }），列宽就可能错乱。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<colgroup><col width="120"><col width="25%"></colgroup> - 避免混用单位：同一表格内不要同时用
px和%，某些 Android WebView 会 fallback 到 auto -
<col>不支持fr单位，只认px、%、auto - 后续行的
<td>上设width会被忽略，别白费劲
内容溢出后文字不换行怎么办
启用 table-layout: fixed 后，单元格内文字默认不折行——这不是 bug，是规范行为。列宽锁定了，但内容区仍按默认 white-space: normal（实际多数重置样式会设成 nowrap），导致长文本横向溢出甚至压垮隔壁列。
- 强制换行：加
word-break: break-all（适合日志 ID、哈希值等纯机械字符串） - 友好换行：加
overflow-wrap: break-word（旧名word-wrap: break-word，优先保单词完整） - 两者都写更稳妥：
word-break: break-all; overflow-wrap: break-word; - 确保
<td>有white-space: normal，别被全局样式覆盖 - 如果要单行省略号，得额外加：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
多个表格对不齐的隐藏原因
看起来都是 width: 100% + table-layout: fixed，但列宽就是不一致？大概率是这些细节没对齐：
- 一个表用了
<col>，另一个靠第一行<th>的width，列宽计算逻辑不同 - 边框模式不统一：
border-collapse: collapse必须两边都设，否则separate下的border-spacing会额外占空间 - 字体或字号不同：哪怕只差
1px字号，在 fixed 模式下也会影响内容区渲染宽度 - 父容器影响：Safari 对套在
display: inline-block里的<table>有时会忽略table-layout: fixed，换成block或加vertical-align: top
最麻烦的是：一旦用了 table-layout: fixed，列宽就彻底脱离内容弹性——后端返回超长字段时，前端无法靠 CSS 自动适应，得提前约定长度或服务端截断。
