Меню

Css таблицы для мобильной версии



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

Совсем недавно, а если быть точным – 2 февраля, подписчики блога Яндекса, получили письмо “Как быть мобильным”. В данном письме указано только два условия, по которым Яндекс считает страницы пригодными для мобильных устройств:

  • не должно быть горизонтальной прокрутки;
  • не должно быть элементов, которые не работают в популярных мобильных платформах.

Оптимизированные страницы для мобильных устройств по мнению Яндекса

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

table

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

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

Источник

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

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

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

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

HTML разметка

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

Название услуги Сайт Сроки Количество страниц Стоимость
Адаптация таблиц Лендинг 5 дней 1 1 000 руб
Адаптация таблиц Корпоративный сайт 6 дней 5 2 000 руб
Адаптация таблиц Интернет-магазин 7 дней 15 5 000 руб

Атрибут 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.

Создано 27.09.2019 10:50:39

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

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

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

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

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

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

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

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

    master284master284 30.09.2019 18:48:08

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

    ferensyferensy 27.05.2021 14:43:18

    Отличный вариант. Спасибо. Немного изменил CSS, чтобы не добавлять data-label к каждой ячейке. table td:nth-child(1)::before < content: 'Название услуги'; >table td:nth-child(2)::before < content: 'Сайт'; >И так далее, а то на страницах с таблицами, где строк больше 400, код стал доминировать над контентом.

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

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

    Источник

    Css таблицы для мобильной версии

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

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

    Нарисуем таблицу графика работы службы доставки со сменными курьерами и ценами, добавив атрибут aria-label (текстовую метку) к ячейкам с данными.

    Время доставки Курьер Оплата картой Стоимость доставки
    8:00-12:00 Николай Нет 20 руб.
    12:00-18:00 Вадим Да 50 руб.
    18:00-23:00 Алексей Да 120 руб.
    1:00-6:00 Евгений Нет 90 руб.

    Внешний вид таблицы на ПК с фиксированным разрешением 1140 пикс. будет выглядеть примерно так.

    HTML-таблица для службы доставки

    При уменьшении разрешения дисплея до 334 пикс. ячейки сожмутся на сколько это возможно и оставят часть информации скрытой.

    Режим адаптивного дизайна, таблица

    С помощью CSS мы сможем добиться нужно эффекта – разделение таблицы на понятные посетителю блоки при разрешении экрана меньше 800 пикс. Просто добавим к уже созданным стилям следующий код:

    На скриншоте ниже вы можете наглядно оценить превосходство данного метода.

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

    Спасибо за внимание! Не забывайте ставить оценку в рейтинге статьи!

    Источник

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

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

    В некоторых случаях вносится правка только в код CSS, в других случаях придётся прописывать дополнительные классы и в коде html, цель одна — сделать таблицы удобоваримыми на смартфонах, планшетах и иже с ними.

    Если вы используете на сайте таблицы, то их также надо адаптировать под мобильные устройства. Я использую два варианта адаптации – сжатие и перенос слов + выстраивание таблиц в один столбик.

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

    Основной вариант

    Итак, для большинства таблиц на сайте я использую код в css:

    @media screen and (max-width:1000px)

    Он указывает, что слова, которые не помещаются в блок, должны при разрешении менее 1000 px начинаться с новой строки. Разрешение 1000 – это пример, смотрите по своим сайтам, для кого-то есть смысл ставить разрешение меньше.

    Добиться хорошего отображения table можно с помощью двойного кода в CSS. Я использую параллельно:

    В нём указано, что при разрешении менее 700 px таблица отображается в 100%-ом варианте по размеру, то есть, сжимается, но занимает весь блок по ширине. Свойство !important показывает, что оно будет применяться для всех разрешений менее 700 px.

    Адаптация в один столбик

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

    Затем в стилях прописывается код:

    В данном случае display: block; указывает, что в таблицах mceItemTable блокируется tbody, th, td, tr. Как результат, при разрешении менее 600 px таблицы строится в одну колонку и table, по сути, не является.

    Использование таблиц – это ещё один пирожок в корзину удобства пользователя, но они должны корректно отображаться и на мобильных устройствах, иначе результат будет противоположным ожидаемому – посетители станут убегать от кривых Table и ухудшат ПФ. Никто не запрещает выводить таблицы в одну колонку для всех Table, и наоборот, но лучше микст в зависимости от особенностей табличной конструкции.

    Источник

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

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

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

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

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

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

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

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

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

    Если вы не знаете, как проверить ваш сайт на адаптивность, то можете ознакомиться с моей статьей: Как проверить сайт на адаптивность?

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

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

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

    1. 1.Вычисляем класс блока, внутри которого находится таблица. Если вы еще не знаете как инспектировать код страницы, то вы может об этом прочитать в моей статье: Изменение темы WordPress. Определение Class и ID
    2. 2.Подбираем такую ширину, начиная с которой у нас таблица уже становиться не читабельной.
    3. 3.В файле стилей темы, или в файле стилей сайта, в зависимости от того, на какой CMS работает ваш сайт, пишем следующий медиа запрос:

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

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

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

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

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

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

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

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

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

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

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

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

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

    js-файл загружаем в папку js, а css-файл — в папку css.

    Источник

  • Читайте также:  Виды полуфабрикатов из говядины и их кулинарное использование