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

В мой список раздражающих меня вещей в веб-дизайне входят таблицы, часто не оптимизированые для устройств меньше компьютера. Допустим, я открыл Википедию на  iPhone и  просматриваю список эпизодов  из  «Звёздный путь: Следующее поколение» (я вырос в конце 80 — х), в таблице много данных, и состоит она из множества столбцов. Заканчивается это дело множеством тыканий пальцем в экран , переворачиванием устройства, и раздражением.

Это проблема широко распространена в вэбе несмотря на то, что есть  несколько вариантов отзывчивых таблиц, в том числе такой просто с помощью CSS:

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

 

С чего начать?

Мы создадим такую же таблицу на обычном HTML как выше в примере:

 

Наша Таблица состоит из четырех столбцов. Давайте добавим немного  CSS  стилей:

Это  похоже на многие HTML-таблицы, с которыми вы работали ранее. И, наверное, сейчас вы думаете, так как же мне сделать таблицу резиновой?

 

Сделаем таблицу адаптивной

Сначала, добавим атрибут  aria-label  для каждой ячейки данных с именем столбца.  Которые будут использоваться в качестве маркировки в отзывчивом макете. Использование aria-label  также обеспечивает поддержку  для чтения с экрана.

 

 

Теперь напишем несколько медиа-запросов

 

 

В маленькой области видимости  <tr>  и  <tr>  элементы будут отображаться на блочном уровне, а не как табличные строки и ячейки. А псевдоэлемент :before теперь служит в качестве label.

Вот наша таблица (Попробуйте сузить экран вашего устройства).

 

See the Pen qargXL by Ruslan (@rkaliev) on CodePen.0

 

И это все?  ?

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

 

 

Источник: allthingssmitty.com

dev-tricks.ru

Responsive Tables

Начну с моего фаворита — Responsive Tables. Это изящное решение на jQuery и Bootstrap 3, позволяющее скрывать некоторые колонки (все настраивается) или добавлять горизонтальную прокрутку на устройствах с маленькими экранами.

Самый простой способ

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

@media screen and (max-width: 640px) { 	table { 		overflow-x: auto; 		display: block; 	} }

Желательно, чтобы таблицы были обернуты в DIV с "overflow-x: scroll".

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

FooTable

Интересное решение на jQuery, которое имеет как Bootstrap, так и отдельную версии. На маленьких экранах позволяет сократить количество колонок, при этом показывая скрытые данные по клику.

→ Скачать на GitHub или посмотреть демо

Stacktable.js

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

→ Скачать на Github или смотреть демо

Tablesaw

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

→ Скачать на GitHub

Пример без jQuery

Пример отображения таблицы без использования jQuery-плагина.

→ Смотреть на Codepen.

Еще есть пример на Codepen без Javascript, но с использованием display:block и data attributes.

Способ от David Bushell

Реализация адаптивных таблиц в виде добавления горизонтальной прокрутки с использованием только CSS. Выглядит очень хорошо.

→ Смотреть на Codepen

habr.com

Примеры применения таблиц bootstrap 3

Для адаптивных таблиц bootstrap 3 созданы свои class=""

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

Базовый класс таблиц bootstrap 3

Базовым классом таблиц является class="table" создающий отступы и горизонтальные разделители секций.

Чередование фона ячеек таблиц

При необходимости можно добавить чередование горизонтальным строкам таблиц добавив к базовому селектору класс class="table table-striped", эффект происходит за счёт использования свойства .table-striped > tbody > tr:nth-child(odd) и устанавливает цвет фона свойством background-color: #f9f9f9; который Вы можете изменить на свой.

Бордюры для строк и ячеек таблиц

Для добавления всем строкам и ячейкам таблиц видимых бордюров, примените к базовому селектору класс class="table table-bordered" добавление прроисходит .table-bordered и используется свойство border: 1px solid #dddddd;.

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

Вы можете добавить к базовому селектору класс class="table table-hover" чтобы при наведении фон выделялся цветом, используется значение свойства background-color: #f5f5f5;.

Уменьшение высоты строкам таблиц

Уменьшить высоту горизонтальным строкам таблиц можно применив к базовому классу селектор class="table table-condensed"

, уменьшатся отступы с верху и с низу.

Адаптивность широких таблиц

При достижении определённой ширины таблиц, невозможно контролировать их адекватный вид, поэтому стоит обернуть таблицу в блок c <div class="table-responsive"> установив таблице свойство смещения по overflow: x;. Добавится ползунок скроллинга смещения по горизонтали, при этом высота таблицы останется прежней.

Обратите внимание!!! Файл стилей должен быть не менее версии v3.3.0, в более ранних версиях был недостаток относящийся к class="table-responsive", при переходе на размер ширины (max-width:767px) таблица теряла скроллинг по оси — x, и содержимое большего размера выходило за пределы адаптивного состояния.

Контекстные классы для строк и ячеек таблиц

Применяйте контекстные классы для изменения состояния строк и ячеек таблиц, а так же для добавления цвета. Ниже предоставлен пример применения контекстных классов.

Установка видимости таблиц и их элементов

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

Видимость таблиц и их элементов при печати

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

Описанные классы для таблиц bootstrap 3 можно использовать в зависимости от требуемых обстоятельств по отдельности, а так же применять по нескольку одновременно.

atmpl.ru

---

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

 

 

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

Почему я не использовал структуру таблицы HTML и вместо этого пошел с неупорядоченными списками? Мне было трудно сделать этот ресурс адаптивным, используя правильную семантику таблицы. Поэтому я больше думал о стороне UX и о коде ниже.

 

Создание структуры

Мы использовали section

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

Как и ожидалось, данные столбцов — это просто элементы списка.

<section>
 <header>
 <h2>Features</h2>
 <ul>
 <li>Feature 1</li>
 <li>Feature 2</li>
 <li>...</li>
 </ul>
 </header>
 
 <div class="cd-table-container">
 <div class="cd-table-wrapper">
 
 <div class="cd-table-column">
 <h2>Plan 1</h2>
 <ul>
 <li>1 GB</li>
 <li>2</li>
 <li>...</li>
 </ul>
 </div> <!-- cd-table-column -->
 
 <div class="cd-table-column">
 <h2>Plan 2</h2>
 <ul>
 <li>2 GB</li>
 <li>5</li>
 <li>...</li>
 </ul>
 </div> <!-- cd-table-column -->
 
 </div> <!-- cd-table-wrapper -->
 </div> <!-- cd-table-container -->
</section>  

 

 

Добавление стиля

Ничто не зацикливается на CSS. Просто одно замечание: мы обернули столбцы в 2 div, .cd-table-container и .cd-table-wrapper. Почему два, а не только один? Потому что я установил ширину первой из них равной 90% с помощью переполнения-x: auto, тогда как ширина второго поля задается суммой всех значений ширины столбцов. Таким образом, у меня может быть некоторый запас справа, и пусть контент прокручивается, если его ширина больше 90% от области просмотра.

 

Обработка событий

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

Статья переведена с зарубежного источника!

 

s-sd.ru

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

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

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

Анатомия таблиц сравнения особенностей

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

Достаточно легко заметить упомянутые выше элементы: название продукта, название функции и метка, показывающая принадлежность к товару. Обратите внимание, что код &#10004;отображает символ галочки. А теперь вернемся к корню проблемы. Должны быть соблюдены несколько условий, чтобы таблицы вели себя адекватно на маленьких экранах:

Лучшее решение – сместить ячейки с названием функций над другими тремя ячейками, обозначающими наличие или отсутствие функции.

Первый способ: Flexbox

И как же добиться этого? Одним из решений станет flexbox. Если же вы не знаете, что это такое, или забыли, вы можете почитать недавнюю статью от NickSalloum по данной теме. А все остальные могут смело читать дальше.

Первым делом, необходимо убедиться, что изменения вступают в силу только на маленьких экранах. Для этого применим медиа запрос, используя классическое значение ширины экрана в 768px.

Чтобы наша магия сработала, необходимо знать парочку важных правил:

Демо можно посмотреть по ссылке.

Естественно, данное решение справедливо, пока оно работает. По данным сайта caniuse.com flexbox под держивается в более чем 80% современных браузеров, и в 93%, если учесть браузеры, поддерживающие вендорные префиксы или использующие старые версии flexbox. IE поддерживается с 10 версии (только синтаксис 2012 года), IE11 имеет полную поддержку. Так как нас интересует поддержка только на маленьких экранах, то мы можем пренебречь поддержкой IE. На мобильных устройствах поддержка начинается с Android 4.4 и iOS 7.1. Для предыдущих версий требуются вендорные префиксы, а также в них не поддерживаются функции обертки.

Также необходимо делать фоллбэки, как, например, div для скроллинга в Bootstrap.

Второй способ: Экстра разметка + ARIA-роли

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

CSSкод также достаточно прост:

Ради доступности можно пойти на такой дополнительный шаг и скрыть экстра разметку с помощью aria-hidden=»true». Таким образом, браузеры, уважающие спецификацию aria-hidden, не будут считывать дублирующий контент дважды.

Демо второго метода

Заключение

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

Автор: Adrian Sandu

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

webformyself.com

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

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

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

<div class="table-responsive" style="max-width: 100%; overflow: auto;">  <table>  ...  </table>  </div>

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

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

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

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

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

<script src="/footable.min.js"></script>  <script>  	$(function() {   	$('.table').footable({});  	});  </script>

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

jQuery(function () {  	jQuery('.table').footable({  		calculateWidthOverride: function() {  			return {width: jQuery(window).width()};  		}  	});  })

 

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

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

<table class="table">  <thead>  	<th>Модель телефона</th>   	<th data-breakpoints="mobile">Цена</th>  	<th data-breakpoints="mobile tablet">RAM, Гб</th>  	<th data-breakpoints="mobile tablet">Диагональ, дюймов</th>  	<th data-breakpoints="mobile tablet">PPI</th>  	<th data-breakpoints="mobile tablet">Аккумулятор, мА·ч</th>  </thead>  <tbody>  ...  </tbody>  </table>

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

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

jQuery(function () {  	jQuery('.table').footable({  		calculateWidthOverride: function() {  			return {width: jQuery(window).width()};  		},  		breakpoints: {  			mobile: 0,  			tablet: 720,  			desktop: 1024  		}  	});  })

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

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

<table class="table">  <thead>  <tr class="footable-header">  ...  </tr>  </thead>  <tbody>  <tr data-expanded="true">  	<td>OnePlus One</td>  	<td>100500 руб</td>  	<td>3</td>  	<td>5.5</td>  	<td>401</td>  	<td>3100</td>  </tr>  ...  </tbody>  </table>

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

webbeaver.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. 5.После того, как файлы загружены, нам необходимо их подключить на самом сайте. Файл stacktable.css нам нужно будет подключить перед закрытием тега head, а файл stacktable.js перед закрытием тега body.

   Для сайта работающего на WordPress фрагмент кода отвечающий за вывод тега head находится внутри файла header.php, который расположен в папке с активной темой.

6. 6.Для CMS WordPress есть специальная функция get_template_directory_uri(), которая позволяет в автоматическом режиме определить полный пут к папке с активной темой. Воспользуемся этой функцией и добавим следующий фрагмент кода:
7. 7.Теперь тоже самое нам необходимо проделать с java-script файлом. Открываем файл footer.php, который находится в папке с активной темой. Находим тег </body> и перед ним вставляем следующий код:
8. 8.Для инициализации скрипта перед закрытием тега body добавляем следующий скрипт:

   Здесь вам нужно вместо #primary table подставить либо тот класс таблицы, который используется у вас, либо же если для какой-то конкретной таблицы вы не задавали определенного класса, то указываем класс или идентификатор блока внутри которого находится таблица:

9. 9.Сохраняем внесённые изменения. Теперь данный скрипт будет срабатывать для всех таблиц находящихся внутри блока с указанным классом или идентификатором.
10. 10.Так же при желании мы можем еще сделать, что бы ячейки с порядковыми номерами подсвечивались определенным цветом, а пункты, находящиеся в первом столбце выделялись жирным. Для этого в файле style.css допишем следующий код:

11. 11.По умолчанию таблица начинает перестраиваться начиная с ширины экрана 800px. Если вам нужно это изменит, то открываем файл:

    Дале находим строку

    И вместо 800px выставляем своё значение, после чего сохраняем изменения в файле.

Видеоинструкция

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

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

На этом у меня все. Желаю вам успехов в решении проблем с адаптацией таблиц и до встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

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

Чтобы таблица была адаптивной, перейдите в редактирование страницы, где добавлена таблица. Затем перейдите в режим редактирования исходного кода.

Перед открывающимся тегом <table> добавьте тег с классом <div class=»tables-responsive»>.

После закрывающегося тега </table> пропишите тег </div>.

Сохраните изменения.

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

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

Необходимо добавить класс «swipeignore» в тег <div class=»tables-responsive»>, который мы добавили ранее. В результате перед тегом <table> должен быть прописан тег с классами <div class=»tables-responsive swipeignore»>.

Сохраните изменения.

Теперь при прокрутке таблицы вправо не открывается боковое меню, которое мешало работе с таблицей.

Вы можете убрать вывод бокового меню при прокрутке вправо и на других страницах. Необходимо добавить класс «swipeignore» в тег <div> блока, для которого нужно убрать вывод бокового меню. Если у тега не был прописан класс, он примет вид <div class=»swipeignore»>. Если у тега <div> уже добавлены классы, то пропишите «swipeignore» через пробел, например <div class=»class swipeignore»>.

aspro.ru