В настоящее время я создаю гибкие таблицы, которые по причинам промежуточного программного обеспечения будут по-прежнему использовать элементы <table>, но со стилем flex. Мне бы хотелось иметь возможность иметь первую и / или последнюю ячейку каждой <tr>, охватывающую всю высоту строки, в то время как другие элементы переносятся между ними.
Цель:
Один из способов решить эту проблему - перейти на таблицу на основе div. Содержимое переноса содержится в отдельном элементе div из первой и последней ячеек без переноса, а дочерние «ячейки» переносятся внутри этого родителя. Однако такой подход вызывает проблемы с существующей инфраструктурой промежуточного программного обеспечения (конфигурации клиентов, сортировка таблиц и разбиение на страницы и т. Д.). Вставка элементов div в структуру <table> также не требуется из-за того, как браузеры отображают элементы <table>.
Демонстрация Codepen с отзывчивой таблицей и таблицей желаемого конечного состояния на основе div: https://codepen.io/shrakner/pen/xmBQKx
Надеюсь, есть какая-то хитрость во флексбоксе, которая может этого добиться, и я просто еще не наткнулся на нее - мне интересны любые предложения или альтернативные способы решения этой проблемы!