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

Question

我有一个需要在表头<th>元素内进行复杂布局的方案。我想通过使<th>元素成为flex容器来解决这个问题。

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

并将<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而不是仅浮动的原因）。

在这种情况下，您需要在每个function filterSlug($ax, $bx){ if(isset($_POST[$ax]) && $_POST[$ax] != ''){ $ax = slug($ax); } else { $ax = slug($bx); } return $ax; } 内使用div并弯曲 that。

th

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

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