Вариант оформления таблицы, которая меняет расположение ячеек на узких экранах
Обратите внимание: Ячейки у данной таблицы имеют фиксированный размер, и соотв. информация, расположенная в них, должна умещаться (иначе ее будет не видно). Если в ячейках информации больше, можно увеличить их ширину или воспользоваться решением: Адаптивная таблица на 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
Для просмотра варианта таблицы на узких экранах, сузьте окно браузера
Реагирующая таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого. Измените размер окна обозревателя, чтобы увидеть эффект:
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 вокруг
:
Пример
Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка» или «авто»).
Перейдите в наш Учебник CSS таблицы, чтобы узнать больше о том, как стиль таблиц.
В данной статье я расскажу вам о некоторых особенностях адаптации таблиц на мобильных устройствах, а так же покажу пару приемов, которые помогут вам сделать ваши таблицы адаптивными даже на самых маленьких экранах.
Навигация по статье:
Если же при уменьшении размеров экрана она у вас выходит за пределы, то скорее всего общая ширина таблицы задана в пикселях, и вам необходимо в CSS или в HTML задать ее в процентах.
Однако, такой прием подходит для каких-то простых таблиц. Если же у нас таблица более сложная, например, вот такая:
То на маленьких экранах она у нас всё равно не поместится, несмотря на то, что общая ширина таблицы задана в процентах.
В итоге нашему посетителю не очень удобно читать такую таблицу. Ему приходится скролить по горизонтали, плюс сам сайт уже выглядит как-то не красиво. Поэтому с этим нужно что-то делать.
Итак, для того, что бы сделать таблицу адаптивной мы можем поступить одним из следующих способов.
Делаем адаптивную таблицу при помощи медиа запроса
Самый простой способ, при помощи медиа запросов для определенного разрешения экрана сделать так, что бы у нас ячейки таблицы перестраивались друг под друга.
Здесь мы для максимальной ширины 400 пикселей для всех ячеек таблицы указываем свойство display: block. То есть, превращаем наши ячейки из табличных элементов в блочные.
Дело в том, что блочные и табличные элементы ведут себя по разному. В частности, блочные элементы, по умолчанию, занимают ширину 100% и располагаются друг под другом, без обтекания.
И так как у нашей таблицы есть еще строка с заголовками столбцов, то нам нужно будет прописать еще вот такой селектор:
Для того чтобы сделать нашу адаптивную таблицу привлекательнее я убрала блок с названием столбцов и для первых ячеек в строке задала другой цвет фона:
Если у вас на сайте используются не сильно сложные таблицы, то в принципе вы можете использовать этот способ для адаптации таблиц, но я хочу вам показать еще один более интересный способ, который позволит сделать таблицы более понятными и аккуратными.
Адаптивные таблицы с использованием специального скрипта
В этом случае при уменьшении экрана происходит трансформация таблицы, она перестраивается в два столбца. Заголовки столбцов переходят в первый столбец и дублируются для каждой позиции.
Если в первом случае мы полностью скрывали строку с заголовками, и было не очень понятно, какие данные находятся в ячейках, то во втором случае здесь для каждого значения дублируется заголовок таблицы. На мой взгляд, этот способ более удобен и привлекательный для посетителей вашего сайта.
Итак, давайте разберем, что же нужно для того, чтобы ваша таблица стала адаптивной и начала вести себя подобным образом.
Если у вас сайт работает на CMS, то вам нужно будет открыть папку с активной темой или шаблоном. В моем случае для сайта используется CMS WordPress, поэтому здесь мне нужно будет открыть папку:
Хотелось бы, чтобы на устройствах с небольшой шириной экрана она выглядела следующим образом:
я не знаю, как можно получить желаемое поведение, если в ячейках таблицы соседствуют ссылки и текст.
2. Цель
Адаптивные таблицы как на изображении выше. Необязательно задействовать плагин, о котором идёт речь ниже, и flexbox вообще. Подойдут любые решения для статических сайтов (где, как известно, используются только HTML/CSS/JavaScript).
3. Плагин responsive-tables
я нашёл плагин для адаптивных таблиц, использующий flexbox. Если в ячейке таблицы только ссылка или только текст, то получаю желаемое поведение. Проблемы возникают, когда в ячейке таблицы соседствуют ссылки и текст: таблица на устройствах с небольшим экраном выглядит вот таким уродливым образом (обратите внимание на запятые между ссылками):
Если ширина экрана ещё меньше, пользователю сайта содержимое ячейки не видно полностью:
4. MCVE
Так отображается MCVE на устройствах с небольшой шириной экрана:
Если текст полностью заключён в ссылку, то он нормально переносится на следующую строку. Когда же в ячейке есть ссылка и текст, перенос осуществляется не так, как хотелось бы.
5. Не помогло
5.1. Свойства flex
Сначала почитал общиеруководства пo flexbox. Попробовал, например, flex-wrap: wrap :
и flex-direction: column :
5.2. Манипуляции с flex контейнером
Последняя ячейка в таблице из MCVE представляет собой flex container:
Гуглил на английском и русском:
Ответов применительно к моему случаю не нашёл. В каком направлении копать дальше, пока не понимаю.
Привет! В этой статье расскажу, как можно адаптировать html-таблицу с помощью CSS
Введение
Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.
Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.
Первый способ адаптации
В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом. Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.
Второй способ адаптации
Для начала поменяем разметку:
Задаем базовые стили:
Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело. Как это исправить? добавляем стили:
Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса ::before мы присоединяем к левому краю наши data-атрибуты. И все получилось. Пример посмотрите в пене:
Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!
Надеюсь, Вам было интересно читать данную информацию. До скорых встреч)
