table-layout: fixed 是禁换行前提，需配合 td 显式 width、display: block、white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，并拦截 contenteditable 中 Enter 与粘贴换行。
table-layout: fixed 是表格禁换行的前提
只给 <td> 加 white-space: nowrap 几乎总没用，根本原因是浏览器默认用 table-layout: auto——列宽由内容撑开，连“溢出”都不存在，nowrap 就没机会生效。
必须先给 <table> 设 table-layout: fixed，强制列宽按定义值计算，才能让 nowrap 有作用对象：
-
table-layout: fixed后，<col>或<td>的width才真正起效 - 不要依赖百分比宽度在
table-layout: auto下“看起来像固定”，它仍是动态的 - 如果用了
flex或grid布局替代表格，就别硬套这套逻辑——直接用块级容器配white-space: nowrap
td 必须显式设 width 且 display 为 block
<td> 默认是表格单元格渲染模式，不是块级上下文，white-space: nowrap 对它的约束力极弱。光写 white-space: nowrap 不够，还得让它“变成一个能管住内容的盒子”：
- 给目标
<td>加width: 120px或max-width: 150px（不能只靠父级<col>，某些浏览器对<col>宽度支持不稳定） - 必须加
display: block或display: inline-block，否则overflow: hidden和text-overflow: ellipsis都不生效 - 避免在
<td>里嵌套<p>、<div>等块级元素，它们自带换行语义，会覆盖nowrap
text-overflow: ellipsis 要三个条件同时满足
想显示省略号而不是文字跑出表格或拉宽整列？text-overflow: ellipsis 不是写了就出，它卡得非常死：
立即学习“前端免费学习笔记（深入）”；
- 必须有
white-space: nowrap - 必须有
overflow: hidden（overflow: clip在部分旧 Safari 中不支持） - 容器必须有**确定宽度**：用
width、max-width，或在table-layout: fixed表格中给<td>显式设像素/百分比宽 - 缺任意一个，
ellipsis就是纯摆设——检查 computed styles，别只信你写的 CSS
contenteditable 的 td 怎么彻底禁 Enter 换行
即使上面全配好了，用户点进 contenteditable="true" 的 <td> 按 Enter，还是会插入 <div> 或 <p>，DOM 变成多行结构，CSS 彻底失效：
- 监听
keydown，对e.key === 'Enter'立即调用e.preventDefault() - 监听
paste，用e.clipboardData.getData('text/plain')提取纯文本，并.replace(/[\r\n]/g, '')清掉所有换行符 - Safari 下还要加
-webkit-appearance: none，否则默认contenteditable样式可能干扰光标定位 - 别试图在
input或blur里后置清洗——DOM 已污染，光标大概率跳回开头
真正麻烦的不是写几行 CSS，而是每一步都得闭环：table-layout 控制布局基准，width + display 给 nowrap 提供作用域，overflow + ellipsis 收尾视觉，keydown/paste 拦住 DOM 层的换行注入。漏一环，效果就断在半路。
