table-layout: fixed 是硬性前提，必须配合 width（如100%）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 和 max-width/width 才能使省略号生效；Flex 嵌套时还需 min-width: 0，title 属性可补充完整文本显示。

table-layout: fixed 是前提，不是可选项

不加 table-layout: fixed，其他所有 CSS 都白配。浏览器默认用 table-layout: auto，会按内容撑开列宽——此时给 <td> 设 max-width 或 width 完全无效，overflow: hidden 失去作用对象，text-overflow: ellipsis 根本不会触发。

必须在 <table> 元素上显式声明：
style="table-layout: fixed; width: 100%;"
注意：width 也要设（哪怕只是 width: 100%），否则某些浏览器下 fixed 行为不稳定。

更稳妥的做法是配合 <col> 指定列宽：
<col style="width: 150px">
比在每个 <td> 上重复写 max-width 更可靠，也便于统一响应式调整。

td 必须凑齐四个 CSS 声明

单行省略号在 <td> 中生效，缺一不可：

立即学习“前端免费学习笔记（深入）”；

• white-space: nowrap：默认 normal 允许换行，撑高单元格，text-overflow 直接失效
• overflow: hidden：仅当容器有明确宽度限制时才真正“隐藏溢出”，否则只是摆设
• text-overflow: ellipsis：只对单行生效；clip 可替代，但无提示性
• max-width 或 width：写在 <td> 上，或由 <col> 控制；用 max-width 比固定 width 更适应响应式

常见错误写法：
<td style="overflow: hidden; text-overflow: ellipsis;"> —— 漏掉 white-space: nowrap 和宽度约束，必然不生效。

Flex 布局嵌套表格时，min-width: 0 很关键

如果表格被包在 display: flex 容器里（比如用 Flex 做页面主布局），<td> 会继承父级的 min-width: auto，导致它宁可撑破也不截断。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

必须在 <td> 上额外加：
min-width: 0

可选增强写法：
style="min-width: 0; flex: 1;"
尤其当 <td> 是 Flex 子项且需自适应剩余空间时，这能防止它“赖着不收缩”。

title 属性是用户友好的补救措施

省略号解决了视觉混乱，但牺牲了信息完整性。鼠标悬停看不到完整内容，体验就断了一截。

给 <td> 加 title 属性是最轻量、兼容性最好的方案：
<td title="完整长文本内容" style="...">...

注意：
– title 值应与单元格文本一致（服务端渲染时直接赋值最稳）
– 不要用 JS 动态塞，容易漏或错位
– 移动端 touch 交互支持弱，但桌面端几乎 100% 可用

复杂点在于：有些框架（如 Vue/React）中 title 绑定容易被忽略，或者服务端模板未预留字段。这时候得回溯数据源，确保原始文本可被安全透传——不是样式问题，而是数据链路问题。