Использование flexbox для элементов заголовка таблицы <th>

Question

У меня есть сценарий, который требует сложной компоновки элементов заголовка таблицы <th>.Я хочу подойти к проблеме, сделав элементы <th> гибким контейнером.

Однако, если я начну с этого минимального примера

и изменим элементы <th> на display: inline-flex, таблицастановится:

Т.е. ширина столбца заголовка больше не соответствует ширине столбца элементов <td>.

Как я могу использовать flexbox внутри заголовка, не портя рендеринг столбцов?

Изменить, чтобы уточнить сценарий использования : Мои элементы <th> в конечном итоге будут содержать несколько элементов, слева + справавыравнивание (похоже на этот вопрос ).Кроме того, я хочу иметь возможность контролировать поведение растяжения (поэтому 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 вместо просто плавает).

В этом случае вам нужно использовать div внутри каждого th и flex that.

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>