在表头 <th> 元素上使用 flexbox

Question

我有一个场景需要在表头 <th> 元素中进行复杂布局。我想通过使<th> 元素成为弹性容器来解决这个问题。

但是，如果我从这个最小的例子开始

并将<th>元素更改为display: inline-flex，表格变为：

即，标题的列宽不再与<td> 元素的列宽匹配。

如何在不影响列渲染的情况下在标题中使用 flexbox？

编辑以阐明用例：我的<th> 元素最终将包含多个元素，左+右对齐（类似于this question）。此外，我希望能够控制拉伸行为（这就是为什么 flexbox 而不仅仅是浮动）。

---

例如jsfiddle:

<table>
  <thead>
    <tr>
      <th class="column-header">A</th>
      <th class="column-header">B</th>
      <th class="column-header">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

table, th, td {
  border: 1px solid #000;
}

.column-header {
  display: inline-flex;
}

Answer 1

我的元素最终将包含多个元素，左+右对齐。此外，我希望能够控制拉伸行为（这就是为什么 flexbox 而不仅仅是浮动）。

在这种情况下，您需要在每个 th 中使用 div 并调整 。

table,
th,
td {
  border: 1px solid #000;
}

.column-header div {
  display: flex;
  justify-content: space-between;
}

<table>
  <thead>
    <tr>
      <th class="column-header">
        <div><span>A</span><span>A</span></div>
      </th>
      <th class="column-header">
        <div><span>B</span><span>B</span></div>
      </th>
      <th class="column-header">
        <div><span>C</span><span>C</span></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>