Flex вывода тегов дает странный результат

Question

Я хочу добавить значок к тегу th. Я также использую React. У меня:

<th><p>col name</p><ArrowDown /></th>

Я хочу, чтобы текст и значок были выровнены по центру. Я применяю flexbox к th вот так:

th {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

и вижу действительно странные вещи:

Как мне это исправить?

Answer 1

Элементы

th по своей природе имеют отображаемое значение display: table-cell, поэтому изменение их на display: flex будет иметь драматические c последствия, как вы видели.

1. Попробуйте 'inline-flex' вместо 'flex'

Как display: block, display: flex элементы не будут естественно l ie рядом друг с другом.

Как display: inline-block, однако элементы display: inline-flex будут.

Это, вероятно, тоже не будет на 100% правильным, поскольку ячейки таблицы (включая заголовки) ведут себя иначе, чем встроенные элементы.

2. (Предпочтительно) Используйте другой элемент внутри th

<th>
  <div class="header-inner">
    <p>col name</p>
    <ArrowDown />
  </div>
</th>

.header-inner {
  display: flex;
}

Хотя это добавляет еще один элемент в DOM, вероятно, это более безопасный подход. Вы не нарушаете присущие свойства макета <th> элементов и получаете ожидаемое поведение flexbox, которое вам нужно.

В общем, если вы пытаетесь создать сложный макет с минимальными элементами , и он ведет себя не так, как вам хотелось бы, попробуйте разделить свои CSS проблемы. Позвольте заголовкам таблиц иметь свои естественно самоуверенные свойства макета и добавьте свои сложности в отдельный элемент.

Answer 2

пробую

<table>
  <tr>
    <th><span>A</span><span>B</span></th>
    <th><span>A</span><span>B</span></th>
  </tr>
</table>

table {
 width: 500px;
}
th {
  border: 1px solid #ccc;
  width: 200px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

И работает