如何让表格列填充剩余空间且不超出父容器范围？

需求说明 #

• 第1-3列和第5列始终自适应内容宽度；
• 第4列占据所有剩余水平空间；
• 第4列文本永不换行（始终单行显示）；
• 第4列设置overflow:hidden和text-overflow: ellipsis；
• 表格宽度绝不超过父元素宽度。

原代码问题 #

原示例中第4列使用固定宽度100px，存在以下问题：

1. 不具备响应性，无法适配不同宽度的父容器；
2. 仅适配特定最小宽度的父元素，空间利用不灵活。

解决方案 #

通过调整表格布局模式和列的宽度规则，即可实现需求：

1. 给表格设置table-layout: fixed，配合width: 100%确保表格宽度严格受限于父容器；
2. 让自适应列（第1-3、5列）的宽度为fit-content，自动匹配内容宽度；
3. 第4列不设置固定宽度，利用表格的剩余空间，同时配置单行显示和溢出省略样式。

完整代码示例 #

CSS 代码

.container {
  max-width: 100%;
  overflow: hidden;
}

table {
  width: 100%;
  table-layout: fixed; /* 关键：固定表格布局，让列宽度按规则分配 */
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

/* 第1-3、5列自适应内容宽度 */
td:nth-child(1),
td:nth-child(2),
td:nth-child(3),
td:nth-child(5),
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
th:nth-child(5) {
  width: fit-content;
  white-space: nowrap; /* 防止内容换行 */
}

/* 第4列配置：占剩余空间、单行、溢出省略 */
td:nth-child(4),
th:nth-child(4) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; /* 让该列占据剩余空间 */
}

HTML 代码

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>User</th>
          <th>Type</th>
          <th>Description</th>
          <th>Previous</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>KA00000 Michael Smith</td>
          <td>COUNTER_CHANGE</td>
          <td>None</td>
          <td>5</td>
          <td>07-25-2024</td>
        </tr>
        <tr>
          <td>KA00000 Michael Smith</td>
          <td>COUNTER_CHANGE</td>
          <td>None</td>
          <td>8</td>
          <td>07-25-2024</td>
        </tr>
        <tr>
          <td>KA00000 Michael Smith</td>
          <td>CONTENT_CHANGE</td>
          <td>None</td>
          <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies arcu sed dictum eleifend. Nam laoreet eros ante, ut vestibulum magna dignissim eu. Aenean euismod magna eget eros ornare ultricies. In ornare urna nulla, vitae ultricies nulla suscipit
            non. Aliquam feugiat felis ut ipsum tristique viverra id a est. Suspendisse ultrices molestie turpis, at malesuada turpis mattis nec. In hac habitasse platea dictumst. Praesent at nibh tellus.
          </td>
          <td>07-25-2024</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

原理说明 #

• table-layout: fixed 会让表格优先根据列的宽度规则分配空间，而非依赖内容自动撑开，确保表格不会超出父容器；
• 自适应列设置width: fit-content，会自动收缩到内容所需的最小宽度；
• 第4列设置width: 100%，在固定布局下会自动占据所有剩余可用空间，同时通过white-space: nowrap、overflow: hidden和text-overflow: ellipsis实现单行省略效果。

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