Используя flexbox как сделать подбор ширины ячеек как в таблице?

Добрый день. Понадобилось переверстать таблицу (использовал display: table, table-row и table-cell) на display: flex. И тут возникла проблема - мне нравиться таблица, тем что браузер смотрит все строки таблицы и подгоняет ширину ячеек каждой строки нужным образом, т.е. выравнивает контент по столбцам. А если использовать flex, то получается каждая строка выравнивает свои внутренние блоки независимо от другой строки - и это получается явно не таблица.

Как вариант, можно width задать в процентах, а min-width и max-width в пикселах. Становиться гораздо лучше. Уже похоже на таблицу, но все равно нету главного преимущества таблицы - подбор ширины ячейки и распределения пустого места исходя из контента(!), а не просто жесткими рамками width. Может я что-то не прописал или не правильно разметил?

Ссылка на печосницу: codepen.io/dimm/pen/VaOXPG
Спасибо.
  • Вопрос задан
  • 1262 просмотра
Пригласить эксперта
Ответы на вопрос 1
Если уж делать таблицу через display: flex - то флоу должен быть по столбцам. Т.е. столбец для первой колонки стоблец для второй и для третьей. Тогда получится то, что вы хотите сделать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы