如何通过CSS收缩表格单元格且避免内容重叠（不换行）

这问题我做后台表格的时候碰到过好几次，刚好有靠谱的方案能满足你的全部需求——既让目标单元格收缩到指定的max-width，又保证内容完整不截断、不自动换行，还不会和其他单元格重叠。

核心解决方案：组合CSS属性 #

只需要给目标单元格加上两个关键CSS属性，配合已有的max-width就能实现效果：

• white-space: nowrap：强制内容保持一行显示，不会自动换行
• overflow-x: auto：当内容宽度超过单元格max-width时，自动显示横向滚动条，用户可以滚动查看完整内容

完整代码示例 #

<table border=1>
  <tr><td>aaa</td><td>bbb</td></tr>
  <tr>
    <td>aaa</td>
    <td style="max-width: 30px; white-space: nowrap; overflow-x: auto;">bbb1234567890bbb</td>
  </tr>
  <tr><td>aaa</td><td>bbb</td></tr>
</table>

方案原理拆解 #

• max-width：牢牢限制单元格的最大宽度，避免超长内容把表格撑得变形
• white-space: nowrap：严格遵循你“不自动换行”的要求，让内容保持在一行
• overflow-x: auto：完美解决内容溢出重叠的问题，通过滚动条保留内容完整性的同时，不破坏表格整体布局

可选优化 #

如果你觉得默认滚动条不够美观，可以改用overflow-x: scroll（始终显示滚动条），或者自定义滚动条样式来适配页面风格——核心逻辑都是通过控制内容溢出的方式，平衡单元格宽度和内容可读性。

内容的提问来源于stack exchange，提问作者chris01