Как сделать адаптивную таблицу 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.

Читать еще:  Схема цму сделано в ссср

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

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

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

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

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

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Читать еще:  Сделаю мбр в машине

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

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

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

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

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

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

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

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

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

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

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

  • 3. Закачиваем на свой сайт файл stacktable.js, который находится в папке js, и файл stacktable.css, который находится в папке css.
  • 4. В зависимости от того, как сделан у вас сайт, на CMS или без CMS, и какая у вас CMS используется, папки для загрузки этих файлов будут отличаться.

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

    Вёрстка адаптивной таблицы

    Адаптивные сайты уже давно перестали быть диковинкой и они встречаются всё чаще и чаще. Учитывая последние новости с ранжированием поисковых систем (если кто не знает, в поиске с мобильного устройства приоритет отдается адаптивным сайтам), количество таких сайтов будет расти и дальше. Можно быть противником адаптации под мобильные устройства или же выступать «за», но факт остается фактом: всё чаще клиенты требуют , чтобы их сайт был адаптивным и веб-мастерам приходится это делать.

    Читать еще:  Как сделать запись на флешку с ноутбука

    Одной из главных проблем при адаптации сайта под разные разрешения являются таблицы. Особенно, если в них очень много данных. Давайте рассмотрим два способа вёрстки адаптивной таблицы.

    Для начала посмотрим как выглядит таблица:

    Bootstrap-способ вёрстки адаптивной таблицы

    Скажем прямо: по-настоящему адаптивной такую таблицу не назовешь. Она хорошо смотрится на мобильном, ничего никуда не выпирает и вёрстка сайта не «течёт». Такой способ хорошо подходит, если на вашем сайте таблицы встречаются редко и нет смысла подключать какой-то плагин и писать дополнительные стили из-за них. Такой способ используется Bootstrap-ом. Итак, как это реализуется?

    Всё просто: таблица обёрнута в div, которому задана максимальная ширина в 100% и overflow: auto.

    Если таблица длинная, также можно задать максимальную высоту и зафиксировать шапку таблицы.

    Результат, как и следующий пример, можно посмотреть на этой странице .

    Вёрстка по-настощему адаптивной таблицы

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

    Для начала нужно подключить плагин (скачать на GitHub или подключить с CDN), а также инициализировать его:

    Здесь нужно кое-что прояснить: скрипт почему-то считает не ширину viewport-а, а ширину таблицы. Чтобы это исправить, нужно чуть «модернизировать» скрипт:

    В инициализации указываем класс таблицы или просто тег table, если хотим, чтобы все таблицы на сайте были адаптивными.

    Далее для ячеек в шапке таблицы, с помощью data-аттрибутов указываем на каких размерах какие колонки будут скрываться:

    Что всё это значит? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI» и «Аккумулятор». При уменьшении до телефонов, к ним присоединится и колонка «Цена».

    Контрольные точки можно указать в инициализации:

    Это значит что в промежутке 0-720 действует правило для mobile, 720-1024 — tablet, а выше 1024 — desktop. Ничто не мешает создать вам ещё больше правил, если это требуется.

    Также можно сделать, чтобы какая-то колонка была раскрыта по-умолчанию. Для этого указываем data-атрибут data-expanded=«true»

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

    Источники:

    http://myrusakov.ru/css3-responsive-tables-mobile.html

    http://impuls-web.ru/kak-sdelat-adaptivnye-tablicy/

    Вёрстка адаптивной таблицы

  • Ссылка на основную публикацию
    Статьи на тему:

    Adblock
    detector