CSS table-layout:auto下实现最后列自适应最小宽，其余列均分空间

要实现常规列均分表格可用空间，操作列仅占自身内容所需最小宽度的效果，你需要调整表格布局模式并设置针对性的CSS规则，具体方案如下：

核心思路 #

放弃table-layout:auto（自动布局难以精确控制列宽分配），改用table-layout:fixed固定布局，通过以下规则实现需求：

• 给所有非操作列设置相同的极小宽度（比如1%），固定布局下这类列会自动均分表格剩余空间
• 给操作列设置width:0+white-space:nowrap，强制它收缩到刚好容纳内部按钮的宽度，同时避免内容换行

修改后的完整代码 #

CSS

table {
  width: 100%;
  table-layout: fixed; /* 切换为固定布局是关键 */
  border-collapse: collapse; /* 可选，优化边框显示 */
}

tr {
  text-align: left;
}

/* 常规列：均分剩余可用空间 */
th:not(:last-of-type),
td:not(:last-of-type) {
  width: 1%;
  padding: 8px; /* 可选，增加内边距提升可读性 */
}

/* 操作列：自适应内容最小宽度 */
th:last-of-type {
  width: 0;
  white-space: nowrap;
  background-color: orange;
  padding: 8px;
}

td:last-of-type {
  width: 0;
  white-space: nowrap;
  background-color: yellow;
  padding: 8px;
}

HTML

<table>
  <tr>
    <th> Header 1 </th>
    <th> Header 2 </th>
    <th> Header 3 </th>
    <th> Actions </th>
  </tr>
  <tr>
    <td> Data1_1 </td>
    <td> Data1_2 </td>
    <td> Data1_3 </td>
    <td>
      <button>Button 1</button>
    </td>
  </tr>
  <tr>
    <td> Data2_1 </td>
    <td> Data2_2 </td>
    <td> Data2_3 </td>
    <td>
      <button>Button 1</button>
      <button>Button 2</button>
    </td>
  </tr>
</table>

效果说明 #

• 不管操作列里有多少个按钮，它都会自动调整到刚好容纳所有按钮的宽度，不会占用多余空间
• 其余3个常规列会平分表格的剩余可用宽度，保持布局整齐

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