如何实现HTML表格弹性宽度布局？满足特定列宽分配需求

需求说明 #

我需要实现满足以下特性的表格：

• 表格宽度为父容器的100%
• 不带flex-column类的列，宽度自适应自身内容的最大宽度
• 带有flex-column类的列，自动占用剩余的水平空间

简单来说就是中间列占满剩余空间，其余列只占内容所需宽度。我试过Flexbox和CSS Grid都没达到理想效果，求正确的实现方法。

我的尝试代码 #

CSS

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border: 1px solid black;
}

th.flex-column,
td.flex-column {
  width: auto;
}

th:not(.flex-column),
td:not(.flex-column) {
  white-space: nowrap;
}

HTML

<table>
  <thead>
    <tr>
      <th>A</th>
      <th class="flex-column">B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">foo</td>
      <td class="flex-column">2</td>
      <td>3</td>
    </tr>
    <tr>
      <td class="flex-column">4</td>
      <td>5</td>
    </tr>
    <tr>
      <td class="flex-column">6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

正确实现方案 #

问题出在table-layout: fixed的设置，改成table-layout: auto并调整目标列的宽度属性即可，具体代码如下：

修正后的CSS

table {
  width: 100%;
  border-collapse: collapse;
  /* 使用自动布局，让浏览器根据内容计算列宽 */
  table-layout: auto;
}

th, td {
  padding: 8px;
  border: 1px solid black;
}

/* 让flex-column列占据剩余所有空间 */
th.flex-column, td.flex-column {
  width: 100%;
}

/* 非flex-column列禁止换行，宽度贴合内容 */
th:not(.flex-column), td:not(.flex-column) {
  white-space: nowrap;
}

原理说明

• table-layout: auto是核心：浏览器会先计算所有非100%宽度列的内容宽度，再把剩余空间分配给设置了width: 100%的列
• white-space: nowrap确保非目标列的内容不会换行，避免列宽被不必要地拉长
• 目标列的width: 100%会自动填充其他列分配完后的剩余空间，完美匹配需求

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