Создайте адаптивную таблицу с помощью 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

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