Создайте адаптивную таблицу с помощью flexboxCSS

Разбираемся в CSS
Anonymous
Создайте адаптивную таблицу с помощью flexbox

Сообщение Anonymous »

Как создать адаптивную таблицу?

Таблица, которая мне нужна, похожа на эту:

Изображение

Таблица должна быть адаптивной , поэтому необходимо изменить ширину столбцов.

Я думаю, что лучшее решение — использовать Flexbox, но как?

Я пробую этот код:

Код: Выделить всё

.container {
display: flex;
border: 1px solid black;
}

.column {
display: flex;
flex-direction: column;
border: 1px solid black;
}

.cell {
border: 1px solid black;
padding: 5px;
}

Код: Выделить всё


 
something
dog
more dogs


column2 long title
abc
a
aaaaaaa


column 3 tilew
bbbb
da
f


something
ggggg
f
cats



Я просто создаю 4 столбца, и каждый столбец имеет одинаковое количество строк, но, конечно, они не будут одинаковой высоты.
Как это исправить?

Тогда первая ячейка должна быть пусто

Большое спасибо!

Подробнее здесь: https://stackoverflow.com/questions/563 ... ng-flexbox

Вернуться в «CSS»