如何实现HTML表格横向溢出时仅保留一列其余列内容截断？

我之前做后台系统表格的时候经常碰到这种需求，要确保表格不会撑出横向滚动条，同时保留某一列完整显示内容。核心是利用CSS的固定表格布局配合文本截断属性来实现，下面给你完整的代码方案：

HTML 代码 #

<div class="table-container">
  <table class="truncate-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>商品名称</th>
        <th class="no-truncate">商品详情</th> <!-- 这一列不截断 -->
        <th>价格</th>
        <th>库存</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>超大型智能扫地机器人Pro Max</td>
        <td>这款扫地机器人支持全屋智能规划，配备5000Pa大吸力，续航可达120分钟，还能自动识别地毯、瓷砖等不同地面材质</td>
        <td>2999元</td>
        <td>12</td>
      </tr>
      <tr>
        <td>2</td>
        <td>超薄全面屏4K智能电视</td>
        <td>采用OLED自发光屏幕，刷新率120Hz，支持HDR10+，内置AI语音助手，可连接智能家居设备</td>
        <td>6999元</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>
</div>

CSS 代码 #

.table-container {
  width: 100%; /* 让容器占满父元素宽度，避免横向溢出 */
  overflow: hidden; /* 防止极端情况下的溢出 */
}

.truncate-table {
  width: 100%;
  table-layout: fixed; /* 关键：固定表格布局，列宽由CSS控制，不会被内容撑开 */
  border-collapse: collapse;
}

.truncate-table th,
.truncate-table td {
  border: 1px solid #ddd;
  padding: 8px;
  white-space: nowrap; /* 强制内容不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 给不需要截断的列取消截断样式，允许内容换行 */
.truncate-table .no-truncate {
  white-space: normal; /* 恢复自动换行 */
  overflow: visible;
  text-overflow: unset;
  width: auto; /* 让这一列占用剩余可用宽度 */
}

关键知识点说明 #

• table-layout: fixed：这是实现的核心，它会让表格优先使用CSS指定的宽度来布局，而不是根据单元格内容自动调整宽度，从根本上避免表格横向溢出。
• text-overflow: ellipsis：需要配合white-space: nowrap和overflow: hidden才能生效，三者缺一不可，用来实现单行文本截断并显示省略号。
• .no-truncate类：通过重置white-space为normal，让这一列的内容可以自动换行，同时设置width: auto来占用表格的剩余宽度，保证内容能完整显示。

这样设置后，当表格横向空间不足时，除了带有.no-truncate类的列，其他列都会自动截断内容，整个表格不会超出容器宽度，也就不会出现页面横向滚动条了。

内容的提问来源于stack exchange，提问作者nagy.zsolt.hun