Адаптивная таблица на CSS
Вариант оформления таблицы, которая меняет расположение ячеек на узких экранах
Обратите внимание: Ячейки у данной таблицы имеют фиксированный размер, и соотв. информация, расположенная в них, должна умещаться (иначе ее будет не видно). Если в ячейках информации больше, можно увеличить их ширину или воспользоваться решением: Адаптивная таблица на Flexbox, в котором нет таких ограничений.
Пример:
| Заголовок 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 |
Для просмотра варианта таблицы на узких экранах, сузьте окно браузера
Как сделать адаптивные таблицы?
Приветствую вас, дорогие друзья!
В данной статье я расскажу вам о некоторых особенностях адаптации таблиц на мобильных устройствах, а так же покажу пару приемов, которые помогут вам сделать ваши таблицы адаптивными даже на самых маленьких экранах.
Навигация по статье:
Если же при уменьшении размеров экрана она у вас выходит за пределы, то скорее всего общая ширина таблицы задана в пикселях, и вам необходимо в CSS или в HTML задать ее в процентах.
Однако, такой прием подходит для каких-то простых таблиц. Если же у нас таблица более сложная, например, вот такая:
То на маленьких экранах она у нас всё равно не поместится, несмотря на то, что общая ширина таблицы задана в процентах.
В итоге нашему посетителю не очень удобно читать такую таблицу. Ему приходится скролить по горизонтали, плюс сам сайт уже выглядит как-то не красиво. Поэтому с этим нужно что-то делать.
Итак, для того, что бы сделать таблицу адаптивной мы можем поступить одним из следующих способов.
Делаем адаптивную таблицу при помощи медиа запроса
Самый простой способ, при помощи медиа запросов для определенного разрешения экрана сделать так, что бы у нас ячейки таблицы перестраивались друг под друга.
Здесь мы для максимальной ширины 400 пикселей для всех ячеек таблицы указываем свойство display: block. То есть, превращаем наши ячейки из табличных элементов в блочные.
Дело в том, что блочные и табличные элементы ведут себя по разному. В частности, блочные элементы, по умолчанию, занимают ширину 100% и располагаются друг под другом, без обтекания.
И так как у нашей таблицы есть еще строка с заголовками столбцов, то нам нужно будет прописать еще вот такой селектор:
Для того чтобы сделать нашу адаптивную таблицу привлекательнее я убрала блок с названием столбцов и для первых ячеек в строке задала другой цвет фона:
Если у вас на сайте используются не сильно сложные таблицы, то в принципе вы можете использовать этот способ для адаптации таблиц, но я хочу вам показать еще один более интересный способ, который позволит сделать таблицы более понятными и аккуратными.
Адаптивные таблицы с использованием специального скрипта
В этом случае при уменьшении экрана происходит трансформация таблицы, она перестраивается в два столбца. Заголовки столбцов переходят в первый столбец и дублируются для каждой позиции.
Если в первом случае мы полностью скрывали строку с заголовками, и было не очень понятно, какие данные находятся в ячейках, то во втором случае здесь для каждого значения дублируется заголовок таблицы. На мой взгляд, этот способ более удобен и привлекательный для посетителей вашего сайта.
Итак, давайте разберем, что же нужно для того, чтобы ваша таблица стала адаптивной и начала вести себя подобным образом.
Если у вас сайт работает на CMS, то вам нужно будет открыть папку с активной темой или шаблоном. В моем случае для сайта используется CMS WordPress, поэтому здесь мне нужно будет открыть папку:
Адаптивная таблица для мобильных устройств на 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 пикс. будет выглядеть примерно так.
При уменьшении разрешения дисплея до 334 пикс. ячейки сожмутся на сколько это возможно и оставят часть информации скрытой.
С помощью CSS мы сможем добиться нужно эффекта – разделение таблицы на понятные посетителю блоки при разрешении экрана меньше 800 пикс. Просто добавим к уже созданным стилям следующий код:
На скриншоте ниже вы можете наглядно оценить превосходство данного метода.
Спасибо за внимание! Не забывайте ставить оценку в рейтинге статьи!
Адаптивная таблица на чистом CSS
Привет! В этой статье расскажу, как можно адаптировать html-таблицу с помощью CSS
Введение
Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.
Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.
Первый способ адаптации
В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом. Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.
Второй способ адаптации
Для начала поменяем разметку:
Задаем базовые стили:
Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело. Как это исправить? добавляем стили:
Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса ::before мы присоединяем к левому краю наши data-атрибуты. И все получилось. Пример посмотрите в пене:
Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!
Надеюсь, Вам было интересно читать данную информацию. До скорых встреч)
Узнайте, как создать адаптивную таблицу.
Адаптивные таблицы
Реагирующая таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого. Измените размер окна обозревателя, чтобы увидеть эффект:
| First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Чтобы создать адаптивную таблицу, добавьте элемент-контейнер overflow-x:auto вокруг