overflow:hidden 在 table-cell 上无效，因规范规定其被忽略；需在单元格内嵌套 block 容器并设 max-width、white-space:nowrap、text-overflow:ellipsis，且表格须用 table-layout:fixed 配合 col 宽度控制。
overflow:hidden 在 table-cell 上为什么不起作用
直接给 <td> 或 <th> 设置 overflow: hidden 通常无效——这是浏览器对表格布局的默认行为限制。表格单元格（table-cell）的 overflow 属性被规范定义为「忽略」，除非显式改变其 display 值。
必须用 display:block 包裹内容才能生效
真正起作用的方式是：在单元格内加一层容器（如 <div>），并设为 display: block，再对其应用 overflow: hidden 和尺寸约束。否则样式会被忽略。
常见错误写法：<td style="overflow:hidden; white-space:nowrap">超长文本</td> → 不会截断
正确做法：
<td>
<div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px;">
这是一段特别特别长的文本内容
</div>
</td>
-
max-width必须指定，否则overflow:hidden无边界可裁剪 -
white-space: nowrap防止换行，确保单行截断 -
text-overflow: ellipsis要配合display: block或inline-block才能显示省略号
table-layout: fixed 是控制列宽的关键
如果整列宽度不固定，即使单元格内 div 有 max-width，表格仍可能撑开。这时必须给 <table> 加 table-layout: fixed，并为列（<col> 或 <th>/<td>）设置明确宽度。
立即学习“前端免费学习笔记（深入）”；
示例：
<table style="table-layout:fixed; width:100%;"> <col style="width:120px"> <tr><td><div style="overflow:hidden;...>文本</div></td></tr> </table>
- 不设
table-layout: fixed，列宽由内容自适应，max-width容易失效 -
<col>比在每个<td>上重复写width更可靠、更轻量 - 若用
width在<td>上，需配合!important才可能压过表格自动计算逻辑
移动端或 flex 替代方案更可控
当表格结构复杂、需要响应式或多行截断时，硬套 table + overflow:hidden 很容易失控。此时建议：
- 用
display: flex模拟表格行，每个单元格用flex: 1+min-width控制，overflow行为完全受控 - 多行截断可用
-webkit-line-clamp（仅 WebKit），但需配合display: -webkit-box - 真正需要表格语义（如屏幕阅读器、导出 Excel）时，才坚持用
<table>；否则优先选语义清晰且样式自由的布局方式
表格里藏个 div 再设 overflow 看似简单，但实际要同时调好 table-layout、col、white-space、text-overflow 四个点，漏一个就白配。
