table-layout: fixed 是表格列宽控制的硬性前提，必须加在 <table> 上并配合明确宽度、<colgroup> 显式宽度及 <td> 四个声明（white-space: nowrap、overflow: hidden、max-width、text-overflow: ellipsis），Flex 布局下还需 min-width: 0。
table-layout: fixed 是硬性前提，漏掉就白配
表格默认用 table-layout: auto，列宽由内容撑开——哪怕你给 <td> 写了 max-width: 150px，浏览器也当没看见。table-layout: fixed 必须加在 <table> 上，它才认这个宽度约束。不加这句，其他所有 CSS 都是无效劳动。
注意两点：
-
<table>得有明确宽度（比如width: 100%或具体像素值），否则table-layout: fixed无法计算列宽 - 如果用了
<colgroup>，它的width值必须显式设置，且不能是auto；否则<td>的max-width可能被忽略
td 必须凑齐四个声明，缺一不可
text-overflow: ellipsis 不是“开关”，它只负责画省略号。真正触发截断的是另外三个条件共同作用的结果。每个 <td>（或 <th>）上必须同时写：
-
white-space: nowrap：禁止换行，让文本有机会“溢出” -
overflow: hidden：隐藏超出部分（visible是默认值，完全不截断） -
max-width: 150px（或类似值）：提供明确的宽度边界；比width更适配响应式场景 -
text-overflow: ellipsis：最后一步，告诉浏览器“溢出时画 …”
常见错误是只写后两项，漏掉 white-space: nowrap 或宽度——文字照常换行，根本没进入“单行溢出”逻辑。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
Flex 容器里嵌套表格时，min-width: 0 是隐形门槛
如果表格外层是 display: flex（比如用 Flex 布局做卡片容器），<td> 默认继承 min-width: auto，会强行撑开列宽，绕过所有截断规则。
解决办法是在 <td> 上加：
-
min-width: 0：覆盖 Flex 默认行为，让overflow: hidden生效 - 可选加
width: 0+flex: 1，进一步锁定宽度计算逻辑
这个 min-width: 0 看似无关紧要，但只要没写，哪怕其他三条全对，省略号也不会出现。
中文混排、字体变化会悄悄破坏效果
这套方案对布局极其敏感：
- 中文按字断行，容易触发省略；英文长单词（如 URL）可能顶满整行，导致省略位置偏移
- 如果
<td>设了固定height，而font-size或line-height后续被重置，可能切掉半行字 - emoji、全角符号、中英文混排时渲染宽度不一致，纯靠像素值控制容易撑破或留白过多
真正稳定的写法是放弃固定 height，用 max-width + white-space: nowrap 组合，再配合 table-layout: fixed 锁死列宽——其余变量越少，越不容易翻车。
