如何让表格最后一列填充剩余空间？偏好非JS解决方案

直接用CSS就能实现你要的效果，核心是利用表格的自动布局特性结合最后一列的宽度设置：

关键配置逻辑 #

• 保留表格默认的table-layout: auto，确保列宽根据内容自动计算，同列单元格严格对齐（这就是普通无固定宽表格的原生表现）
• 给表格设置width: 100%让它占满父容器，同时加max-width: 100%防止内容过多时撑破容器
• 最后一列设置width: 100%，让它在其他列适配内容后填充剩余空间；可选加min-width避免内容被过度挤压
• 如果需要强制内容不换行，给单元格加white-space: nowrap，同时给表格容器加overflow-x: auto，内容过多时会出现横向滚动条，不会撑破容器

完整代码示例 #

HTML #

<div class="table-wrap">
  <table class="content-fit-table">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>最后一列</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>短内容</td>
        <td>中等长度内容</td>
        <td></td>
      </tr>
      <tr>
        <td>超长内容超长内容超长内容超长内容</td>
        <td>中等长度内容</td>
        <td>填充剩余空间的内容</td>
      </tr>
    </tbody>
  </table>
</div>

CSS #

.table-wrap {
  width: 100%; /* 你的固定宽度父容器 */
  overflow-x: auto; /* 内容过多时横向滚动，按需开启 */
}

.content-fit-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* 必须保留，自动计算列宽 */
}

.content-fit-table th,
.content-fit-table td {
  border: 1px solid #ccc;
  padding: 8px;
  /* white-space: nowrap; 按需开启，强制内容不换行 */
}

.content-fit-table th:last-child,
.content-fit-table td:last-child {
  width: 100%; /* 最后一列填充剩余空间 */
  min-width: 120px; /* 可选，设置最小宽度防止内容挤压 */
}

效果验证 #

• 当内容较少时：前两列根据内容自动调整宽度，最后一列填满父容器剩余空间
• 当内容过多时：表格不会撑破父容器，要么自动换行（去掉white-space: nowrap时），要么出现横向滚动条（开启white-space: nowrap时），同时保持同列单元格对齐

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