如何设置HTML表格列宽：一列自适应内容另一列占剩余空间

你可以通过以下CSS规则实现需求，不需要提前设置第一列固定宽度，完全适配动态生成的内容：

实现原理 #

默认表格的自动布局模式下，会优先满足单元格内容的最小宽度需求。我们只需要让第一列收缩到刚好容纳自身内容的宽度，同时让第二列占用所有剩余空间即可。

代码示例 #

HTML结构 #

<table style="width: 100%;">
  <tr>
    <td class="col-auto">just this wide</td>
    <td class="col-rest">rest of the available space</td>
  </tr>
  <tr>
    <td class="col-auto">x</td>
    <td class="col-rest">y</td>
  </tr>
</table>

CSS样式 #

/* 第一列：自适应内容宽度 */
.col-auto {
  /* 强制内容不折行，保证宽度由最长内容决定，如果允许内容折行可以删除这行 */
  white-space: nowrap;
  /* 告诉浏览器这列宽度取最小可用值，会自动扩展到刚好放下内容的宽度 */
  width: 0;
}

/* 第二列：占用所有剩余空间 */
.col-rest {
  width: 100%;
}

注意事项 #

• 不要给表格设置table-layout: fixed属性，该属性会强制按预设宽度分配列宽，忽略内容实际宽度，无法适配动态内容。
• 如果第一列内容过长需要允许折行，删除white-space: nowrap即可，第一列会按内容的自然折行宽度适配。

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