td 不支持 overflow 属性，需在内部块级元素（如 div）上设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis；table-layout: fixed 是控制列宽的前提，且需配合 col 或 th 的 width 及 td 的宽度限制。
overflow 不能直接作用于 td 元素
浏览器（Firefox、Chrome、Safari）不支持对 td 或 th 设置 overflow: hidden 等值——这是 CSS 规范限制，不是你写错了。即使加了也无效，控制台可能不报错，但行为完全不生效。
真正起效的溢出控制必须落在 td 内部的块级容器上：
- 给
td里套一层<div>，再对这个 <code>div设white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 或用
display: block强制td子元素成为块级上下文（但需配合width或max-width） -
img、pre、code这类替换/内联元素必须单独处理：max-width: 100%+height: auto，否则它们会绕过所有td宽度约束 <table style="table-layout: fixed; width: 100%"><li>至少一个 <code><col style="width: 20%">或第一行<th> 带明确 <code>width（推荐百分比）-
td上设置word-wrap: break-word或white-space: normal配合宽度限制 -
white-space: nowrap（禁换行） -
overflow: hidden（作用于有明确宽度的块级父容器） -
width或max-width（必须写在该容器上，不能靠 flex 或 % 继承推导） - 后台报表类表格：外层
<div class="table-container"> + <code>overflow-x: auto+table { min-width: 600px } - 移动端或字段 > 4 列：放弃表格，改用卡片堆叠，每行
<tr data-label="订单 ID">，小屏下用 <code>td:before { content: attr(data-label) }补字段名 - 邮件模板等兼容性敏感场景：彻底避开
table-layout: fixed（Outlook 不支持），改用white-space: normal+word-break: break-word+ 百分比列宽
table-layout: fixed 是列宽稳定的前提
只给 td 加 max-width: 120px 没用——默认 table-layout: auto 下，整列宽度由该列最长内容决定，max-width 被忽略。
要让列宽真正受控，三者缺一不可：
漏掉任意一项，word-break 和 text-overflow 都大概率失效。
单行省略号（ellipsis）的三个硬性条件
text-overflow: ellipsis 在表格中尤其容易失败，因为它依赖严格的渲染链：
常见错误：把这三者全写在 td 上——td 不是块级元素，且不支持 overflow；结果就是“样式写了，但省略号死活不出现”。
横向滚动 vs 多列隐藏：选哪个更实际？
当表格列数多、字段语义强（比如「创建时间」「操作人」「审批状态」），强行用 overflow-x: auto 包裹表格，用户滑动时根本记不住当前列对应哪项数据。
更务实的做法是分场景处理：
表格内容溢出从来不是加个 overflow 就能解决的问题，而是布局逻辑、CSS 渲染规则和终端环境三者之间的拉锯战。最容易被忽略的，永远是 table-layout: fixed 的配套要求和 td 内部元素的 display 类型。
