必须显式声明table-layout: fixed，否则浏览器默认auto模式会扫描全部内容动态计算列宽，导致width声明失效；且fixed生效需同时满足：table有显式width、第一行th/td或col定义列宽、父容器提供宽度上下文。
table-layout: fixed 没加，其他全白搭
浏览器默认用 table-layout: auto，它会扫描所有行所有单元格内容，按最长内容动态算列宽——你写的 width: 300px 或 <col width="25%"> 全被无视。必须显式声明 table-layout: fixed，且它只认第一行 <th> 或 <code><col> 的宽度，后续内容再长也不会撑开列。
常见错误：只写了 width: 100% 却漏掉 table-layout: fixed；或者加了 fixed 但没给表格设 width（比如只设了 max-width），这时 fixed 不生效，仍退回到 auto 行为。
父容器没宽度，百分比列宽直接失效
width: 100% 是相对父容器算的。如果父 <div> 没设 <code>width 或 max-width，或者用了 display: inline-block、flex 但没配 min-width: 0，那表格的百分比列宽就失去参照，结果往往是内容最小宽度优先。
移动端尤其容易踩坑：<meta name="viewport" content="width=device-width"> 缺失时，iOS Safari 默认按 980px 渲染，width: 100% 就是按 980px 算，不是屏幕宽度。
- 检查父容器是否设置了明确宽度或
max-width - 若父容器是 flex 项，确认加了
min-width: 0 - 避免在 body 上写
width: 600px这类固定值——它会卡死整个布局流
td 里图片/文本不约束，列宽瞬间崩坏
一张没加限制的 <img>，哪怕只有 1px 高，只要原始宽度 500px，就能把整列拉宽。同理，连续无空格字符串（如 URL、哈希值）在 white-space: nowrap 下也不换行，直接撑破列。
关键控制点：
-
table td img必须设max-width: 100%+height: auto；禁用width: 100%（会变形） -
td默认可能有white-space: nowrap（尤其带操作按钮的模板），要显式覆盖成white-space: normal - 真不能换行的字段（如 ID），单独加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 避免全局用
word-break: break-all——中文断词体验极差；优先用overflow-wrap: break-word
外层容器没兜底，小屏直接错位
就算表格内部全调对了，父容器若没设 overflow-x: auto，小屏下内容横向溢出时，不会出现滚动条，而是直接把右侧内容挤到下一行或遮挡其他元素。
这不是“表格写错了”，而是容器没守边界。最稳妥的兜底方式是：给表格直接父元素加 overflow-x: auto，并确保它有明确宽度上下文（比如不是 inline 或未设 width 的 flex 项）。
真正卡住的地方，往往不是某一行 CSS 写得不对，而是 table-layout: fixed 和父容器宽度这两个前提条件被跳过，或者放任 <img> 在 td 里自由生长——它们一叠加，表格就失控。
