如何为HTML <table> 元素的各列均匀分配剩余空闲空间？

你可以通过插入等宽空白间隔列的方式满足所有要求，无需使用flex/grid布局，完全适配原生table场景：

核心思路 #

• 保留table-layout: auto保证内容列宽度自适应内容，不会挤压文本导致重叠
• 在每两个实际内容列之间插入空的间隔列，这些列会自动平分表格的剩余可用空间，实现列间距相等
• 保留border-spacing: 0 + border-collapse: collapse，避免行高亮时出现背景缝隙

完整代码实现 #

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background: gray;
}
th, td {
  text-align: left;
  padding: 4px 0; /* 仅保留上下内边距，左右间距由间隔列提供 */
}
/* 内容列的最小宽度就是内容宽度，避免挤压 */
.content-col {
  width: auto;
  white-space: nowrap; /* 保证标题不换行，若需要换行可删除该属性 */
}
/* 间隔列，无内容，自动平分剩余空间 */
.spacer-col {
  width: auto;
  min-width: 0; /* 保证窗口缩小时可以被压缩到0宽度 */
}
/* 测试行高亮效果 */
tbody tr:hover {
  background: #fff3cd;
}

<table>
  <thead>
    <tr>
      <th class="content-col">1</th>
      <th class="spacer-col"></th>
      <th class="content-col">333</th>
      <th class="spacer-col"></th>
      <th class="content-col">999999999</th>
      <th class="spacer-col"></th>
      <th class="content-col">22</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="content-col">aa</td>
      <td class="spacer-col"></td>
      <td class="content-col">aa</td>
      <td class="spacer-col"></td>
      <td class="content-col">aa</td>
      <td class="spacer-col"></td>
      <td class="content-col">aa</td>
    </tr>
    <tr>
      <td class="content-col">bb</td>
      <td class="spacer-col"></td>
      <td class="content-col">bb</td>
      <td class="spacer-col"></td>
      <td class="content-col">bb</td>
      <td class="spacer-col"></td>
      <td class="content-col">bb</td>
    </tr>
  </tbody>
</table>

效果说明 #

• 大屏状态下：所有间隔列平分表格剩余宽度，各内容列之间的间距完全相等
• 窗口缩小过程中：间隔列会优先被压缩，内容列宽度保持不变
• 小屏状态下：间隔列被压缩到0宽度，所有内容列紧挨在一起，不会出现内容重叠
• 行高亮时：间隔列和内容列的背景同步变化，不会出现原表格背景透出的缝隙问题

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