如何为HTML/CSS表格列设置不同宽度策略：自适应+溢出省略

问题分析 #

当前核心问题是table-layout: fixed强制表格按固定规则分配列宽，导致前3列无法根据内容自动收缩。要达成需求，需调整表格布局模式，同时保证第4列占据剩余空间并支持溢出省略。

修改后的完整代码 #

CSS 部分

.table-container {
  width: 100%;
  border: 1px solid #000;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  /* 移除fixed布局，使用默认auto模式让列自适应内容宽度 */
}

th, td {
  border: 1px solid #000;
  text-align: left;
  white-space: nowrap; /* 保持文本不换行，行高一致 */
}

/* 第4列设置宽度100%占据剩余空间，同时开启溢出省略效果 */
td:nth-child(4), th:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

HTML 部分

<div style="width: 500px; background-color: #f0f0f0; padding: 10px;">
  <div class="table-container">
    <table>
      <tbody>
        <tr>
          <th>H1</th>
          <th>H2</th>
          <th>H3</th>
          <th>H4</th>
        </tr>
        <tr>
          <td>Lorem Ipsum</td>
          <td>2</td>
          <td>Lorem</td>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
        </tr>
        <tr>
          <td>Lorem</td>
          <td>2222</td>
          <td>Ist</td>
          <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque. </td>
        </tr>
        <tr>
          <td>Ipsum</td>
          <td>22</td>
          <td>Lorem</td>
          <td>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

原尝试无效的原因 #

你之前设置width: auto未生效，是因为table-layout: fixed会忽略内容实际宽度，强制按表格总宽度均分列宽。移除fixed布局后，表格会自动计算前3列的最小内容宽度，第4列的width: 100%会让它填充容器剩余的所有空间，同时white-space: nowrap保证所有列不换行、行高一致。

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