如何实现表格单个单元格填充剩余宽度，其余单元格保持内容最小宽度

你只需添加以下CSS规则即可实现需求：

/* 普通单元格适配内容最小宽度 */
table td:not(.long) {
  white-space: nowrap; /* 可选，避免普通单元格内容折行 */
  width: 1px;
}
/* long类单元格占满剩余宽度 */
table td.long {
  width: 100%;
}

效果说明 #

• 普通单元格的width: 1px会强制单元格收缩到刚好适配自身内容的最小宽度，不会被拉伸占用多余空间。
• long类单元格设置width: 100%后，表格会自动把所有剩余可用宽度分配给该单元格，表格整体依然保持100%父容器宽度。
• 若同一行存在多个带long类的单元格，剩余宽度会被这些单元格平分。

完整可运行示例代码如下：

<table style="width: 100%;">
  <tr>
    <td>some content</td>
    <td>some other content</td>
    <td class="long">some longer content in a cell I want expanded</td>
    <td>more content</td>
    <td>and some more</td>
  </tr>
</table>
<style>
table td:not(.long) {
  white-space: nowrap;
  width: 1px;
}
table td.long {
  width: 100%;
}
</style>

如果你的业务允许普通单元格内的内容折行，删除white-space: nowrap规则即可，布局逻辑不受影响。

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