Как сделать адаптивную таблицу html

Адаптивная таблица для мобильных устройств

На одном из предыдущих уроков, мы рассматривали самый простой способ, как сделать таблицу адаптивной. Суть адаптации таблицы сводилась к появлению горизонтальной полосы прокрутки, на определенной ширине экрана.

Однако появление горизонтальной полосы прокрутки на маленьких экранах мобильных устройств, приведет пользователя в бешенство. Неужели никак нельзя избежать полосы прокрутки? Можно! И я сейчас покажу вам, как это сделать.

HTML разметка

Для управления таблицей, мы обернули её в блок с классом container.

Атрибут data-label

Во всех ячейках таблицы добавлен атрибут data-label и в качестве передаваемого параметра – значения из шапки таблицы. В дальнейшем в каждую ячейку будут добавляться эти значения.

CSS правила

.container <
min-width: 320px;
max-width: 100%;
padding: 0 15px;
box-sizing: border-box;
>

table <
border-collapse: collapse;
width: 100%;
margin: 20px 0;
>

table td, table th <
padding: 10px;
border: 1px solid #cbbdbd;
>

tr:nth-child(even) <
background-color: #f0f4c3
>

Адаптируем таблицу

При уменьшении размеров экрана, содержимое таблицы становится трудно различимым. В адаптивном режиме браузера, определяем контрольную точку, когда пора уже перестроить ячейки (флекс-элементы), в столбик (поменять направление главной оси).

@media (max-width: 720px) <
// переопределяем CSS правила
>

Скроем названия в шапке таблицы.

.container table thead <
display: none;
>

Преобразуем строчные ряды таблицы в блочные элементы. Теперь таблица имеет совсем другой вид – ячейки встали в столбик.

.container table tr <
display: block;
>

Назначим ячейку флекс-контейнером, а данные ячеек раскидаем по правому и левому краю вдоль главной оси.

.container table td <
display: flex;
justify-content: space-between;
font-size: 14px;
>

При помощи псевдоэлемента before и функции attr(), подставим в каждую ячейку значение data-label.

.container table td::before <
content: attr(data-label);
font-weight: bold;
margin-right: 20px;
>

Для просмотра, как работает адаптация таблицы, перейдите на CodePen и нажмите F12.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 1 ):

Очень востребованая возможность при вёрстке сайтов. Спасибо Михаилу!

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

Как сделать адаптивные таблицы?

Приветствую вас, дорогие друзья!

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

Навигация по статье:

Вообще, адаптивность таблиц имеет некоторые особенности. Если, к примеру, у вас ширина таблицы задана не в пикселях, а в процентах, то у вас эта таблица должна будет адаптироваться автоматически под ширину экрана.

Если же при уменьшении размеров экрана она у вас выходит за пределы, то скорее всего общая ширина таблицы задана в пикселях, и вам необходимо в CSS или в HTML задать ее в процентах.

Однако, такой прием подходит для каких-то простых таблиц. Если же у нас таблица более сложная, например, вот такая:

То на маленьких экранах она у нас всё равно не поместится, несмотря на то, что общая ширина таблицы задана в процентах.

В итоге нашему посетителю не очень удобно читать такую таблицу. Ему приходится скролить по горизонтали, плюс сам сайт уже выглядит как-то не красиво. Поэтому с этим нужно что-то делать.

Итак, для того, что бы сделать таблицу адаптивной мы можем поступить одним из следующих способов.

Делаем адаптивную таблицу при помощи медиа запроса

Самый простой способ, при помощи медиа запросов для определенного разрешения экрана сделать так, что бы у нас ячейки таблицы перестраивались друг под друга.

1. Вычисляем класс блока, внутри которого находится таблица.

Здесь мы для максимальной ширины 400 пикселей для всех ячеек таблицы указываем свойство display: block. То есть, превращаем наши ячейки из табличных элементов в блочные.

Дело в том, что блочные и табличные элементы ведут себя по разному. В частности, блочные элементы, по умолчанию, занимают ширину 100% и располагаются друг под другом, без обтекания.

И так как у нашей таблицы есть еще строка с заголовками столбцов, то нам нужно будет прописать еще вот такой селектор:

4. Сохраняем изменения и смотрим, что у нас получилось.

Для того чтобы сделать нашу адаптивную таблицу привлекательнее я убрала блок с названием столбцов и для первых ячеек в строке задала другой цвет фона:

Если у вас на сайте используются не сильно сложные таблицы, то в принципе вы можете использовать этот способ для адаптации таблиц, но я хочу вам показать еще один более интересный способ, который позволит сделать таблицы более понятными и аккуратными.

Адаптивные таблицы с использованием специального скрипта

В этом случае при уменьшении экрана происходит трансформация таблицы, она перестраивается в два столбца. Заголовки столбцов переходят в первый столбец и дублируются для каждой позиции.

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

Итак, давайте разберем, что же нужно для того, чтобы ваша таблица стала адаптивной и начала вести себя подобным образом.

1. Скачиваем следующий архив со скриптом к себе на компьютер:

Файл index.html вы можете открыть в своем браузере. Он представляет собой инструкцию по работе со скриптом и его настройке.