Адаптивная таблица на CSS

Обратите внимание: Ячейки у данной таблицы имеют фиксированный размер, и соотв. информация, расположенная в них, должна умещаться (иначе ее будет не видно). Если в ячейках информации больше, можно увеличить их ширину или отказаться от этого решения.

Пример:

Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5
Контент 1 Контент 1 Контент 1 Контент 1 Контент 1
Контент 2 Контент 2 Контент 2 Контент 2 Контент 2
Контент 3 Контент 3 Контент 3 Контент 3 Контент 3
Контент 4 Контент 4 Контент 4 Контент 4 Контент 4
Контент 5 Контент 5 Контент 5 Контент 5 Контент 5
Контент 6 Контент 6 Контент 6 Контент 6 Контент 6
Контент 7 Контент 7 Контент 7 Контент 7 Контент 7

Для просмотра варианта таблицы на узких экранах, сузьте окно браузера

HTML:

CSS:

Найдено на codepen.io у пользователя Flor Antara

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!