Css адаптивная таблица – Делаем адаптивный HTML, добавляя одну строку в CSS / Edison corporate blog / Habr — Вебджем.рф

Содержание

Адаптивная таблица. Несколько способов реализации.

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

В этой статье реализуем несколько способов сделать адаптивную таблицу.

Способ № 1.

Данный способ предполагает использование обертки для таблицы. Задав свойство overflow-x:auto контейнеру-обертке, мы получим нужный результат: если таблица не будет помещаться на экран, то появится горизонтальный скроллинг.

Разметка HTML

CSS



.table-wrap{
	overflow-x:auto;
}	
table.table-1 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table.table-1 tr {
	background-color: #f8f8f8;
}
table.table-1 th, table.table-1 td {
	text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}

table.table-1 th{
	font-weight: bold;
}

Результат:

Фамилия	Имя	Отчество	Дата рождения	Пол	Страна	Паспорт	Телефон
Иванов	Иван	Иванович	18.08.1995	Мужской	Россия	589047	12345678
Джонн	Смитт	Олегович	18.08.1980	Мужской	Англия	789047	81324567
Ковалева	Екатерина	Дмитриевна	18.08.19680	Женский	Казахстан	289047	12357458

Способ № 2.

Следующий способ адаптировать таблицу под мобильные устройства тоже довольно простой. Здесь нам нужно всего лишь перевести элементы td, th в блоки. Напомним, что по умолчанию свойство display для этих элементов равно table-cell.

Разметка HTML

Третий способ является наиболее элегантным решением. Единственное неудобство в том, что нам придется дублировать в html заголовки th в каждой ячейке td.

Разумеется существуют и другие методы сделать адаптивную таблицу, в том числе и с применением плагинов jQuery или на чистом JavaScript. Можно также воспользоваться решениями, которые предлагают такие фреймворки как Bootstrap.

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

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

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

Моя недавняя статья на HackerNews Пишите HTML, как будто сейчас 1999 год, получила намного больше внимания, чем я ожидал. Последовало несколько комментариев, в которых говорилось о том, что элементы table не очень хорошо работают с мобильными устройствами или о невозможности использования удобного макета на небольших экранах. Это просто неправда.

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

`Демо 1: Просто позвольте им прокручиваться`

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

 Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнее table {
 min-width: 800px; /* Установите здесь нужный min-width */
}
table {
    min-width: 800px; /* Установите здесь нужный min-width */
 }
Посмотрите CodePen ниже, чтобы увидеть ее в действии:
Я на самом деле предпочитаю этот метод из-за его простоты и функциональности. Пользователи на мобильных устройствах знакомы с прокруткой, поскольку это одно из основных необходимых действий. «Обрезка» таблицы дает им мгновенный визуальный сигнал, что они могут прокручивать контент.
Демо 2: Более гибкая, чем вы думаете
Использование чего-то наподобие flexbox имеет тенденцию работать лучше, когда вы имеете дело с меньшими наборами табличных данных. Все, что вам нужно сделать, это добавить небольшую разметку flexbox для целевого размера экрана мобильного устройства.
 /* Используем 800px для мобильного экрана */
@media(max-width: 800px) {
 /* Скрываем заголовки таблицы */
 table thead {
 left: -9999px;
 position: absolute;
 visibility: hidden;
 }
 table tr {
 border-bottom: 0;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 margin-bottom: 40px;
 }
 table td {
 border: 1px solid;
 margin: 0 -1px -1px 0; /* Удаляем двойную границу */
 width: 50%;
 }
}
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 /* Используем 800px для мобильного экрана */
@media(max-width: 800px) {
    /* Скрываем заголовки таблицы */
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* Удаляем двойную границу */
        width: 50%;
    }
 }
Посмотрите демонстрацию на CodePen:
 Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнееЕсть некоторые предостережения, относящиеся к этому подходу:
В настоящее время мы скрываем строку thead в мобильном представлении (только визуально — программы чтения с экрана все еще могут сканировать ее)
Может потребоваться дополнительная работа в зависимости от того, сколько элементов в строке flexbox имеет смысл размещать (на основе проекта и набора данных)
Вы можете сохранить заголовки таблиц и стилизовать их так же, как содержимое tbody, но я считаю, что скрывать их — это более чистый подход. Этот выбор полностью зависит от ваших личных предпочтений. Вы также можете добавить элементы span заголовков внутри основных элементов tbody следующим образом:
   /* Стили span по умолчанию — скрыты на настольных устройствах */
table td span {
 background: #eee;
 color: dimgrey;
 display: none;
 font-size: 10px;
 font-weight: bold;
 padding: 5px;
 position: absolute;
 text-transform: uppercase;
 top: 0;
 left: 0;
}

/* Простой CSS для flexbox-таблиц на мобильных устройствах */
@media(max-width: 800px) {
 table thead {
 left: -9999px;
 position: absolute;
 visibility: hidden;
 }
 table tr {
 border-bottom: 0;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 margin-bottom: 40px;
 }
 table td {
 border: 1px solid;
 margin: 0 -1px -1px 0;
 padding-top: 35px; /* дополнительный отступ для предотвращения склеивания заголовков */
 position: relative;
 width: 50%;
 }
 /* Отображение span заголовков */
 table td span {
 display: block;
 }
}
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 /* Стили span по умолчанию — скрыты на настольных устройствах */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}
 
/* Простой CSS для flexbox-таблиц на мобильных устройствах */
@media(max-width: 800px) {
    table thead {
         left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px; /* дополнительный отступ для предотвращения склеивания заголовков */
        position: relative;
        width: 50%;
    }
    /* Отображение span заголовков */
    table td span {
        display: block;
    }
}
Обновление: как указал пользователь mmoez, гораздо чище будет использовать псевдо-селекторы :nth-child для реализации полей заголовков на мобильных устройствах.
Почему я должен обращать внимание на использование элементов table?
Если в двух словах: доступность и правильная семантика. Зачем использовать отвертку, когда вам нужен молоток? Конечно, вы можете заставить эту отвертку выглядеть и работать почти так же, как молоток, но с какой целью? Просто используйте молоток. Получайте удовольствие, делая свои таблицы адаптивными!
Автор: Bradley Taunt
Источник: https://bradleytaunt.com
Редакция: Команда webformyself.
 Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнее PSD to HTML
Практика верстки сайта на CSS Grid с нуля
 СмотретьАдаптивная таблица CSS | {dev-tricks}
В мой список раздражающих меня вещей в веб-дизайне входят таблицы, часто не оптимизированые для устройств меньше компьютера. Допустим, я открыл Википедию на  iPhone и  просматриваю список эпизодов  из  «Звёздный путь: Следующее поколение» (я вырос в конце 80 — х), в таблице много данных, и состоит она из множества столбцов. Заканчивается это дело множеством тыканий пальцем в экран , переворачиванием устройства, и раздражением.
  Это проблема широко распространена в вэбе несмотря на то, что есть  несколько вариантов отзывчивых таблиц, в том числе такой просто с помощью CSS:
Так в чем же препятствие для использования этого или другого шаблона? Нужно много времени? Или усилий? Давайте быстро пробежимся по этой теме.
 
С чего начать?
Мы создадим такую же таблицу на обычном HTML как выше в примере:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope=«col»>Account</th>
      <th scope=«col»>Due Date</th>
      <th scope=«col»>Amount</th>
      <th scope=«col»>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Visa — 3412</td>
      <td>04/01/2016</td>
      <td>$1,190</td>
      <td>03/01/2016 — 03/31/2016</td>
    </tr>
  </tbody>
</table>
 
Наша Таблица состоит из четырех столбцов. Давайте добавим немного  CSS  стилей:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}
table th,
table td {
  padding: .625em;
  text-align: center;
}
Это  похоже на многие HTML-таблицы, с которыми вы работали ранее. И, наверное, сейчас вы думаете, так как же мне сделать таблицу резиновой?
 
Сделаем таблицу адаптивной
Сначала, добавим атрибут  aria-label  для каждой ячейки данных с именем столбца.  Которые будут использоваться в качестве маркировки в отзывчивом макете. Использование aria-label  также обеспечивает поддержку  для чтения с экрана.
 
<td aria-label=«Account»>Visa — 3412</td>
<td aria-label=«Due Date»>04/01/2016</td>
<td aria-label=«Amount»>$1,190</td>
<td aria-label=«Period»>03/01/2016 — 03/31/2016</td>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 @media screen and (max—width: 600px) {
  table thead {
    display: none;
  }
  table tr {
    border—bottom: 3px solid #ddd;
    display: block;
  }
  table td {
    border—bottom: 1px solid #ddd;
    display: block;
    text—align: right;
  }
  table td:before {
    content: attr(aria—label);
    float: left;
  }
}
 
 
В маленькой области видимости  <tr>  и  <tr>  элементы будут отображаться на блочном уровне, а не как табличные строки и ячейки. А псевдоэлемент :before теперь служит в качестве label.
Вот наша таблица (Попробуйте сузить экран вашего устройства).
 
See the Pen qargXL by Ruslan (@rkaliev) on CodePen.0
И это все?  😳
Да, в общем то. По крайней мере для этого примера точно все. Имейте в виду, что это только один резиновый макет таблицы с относительно простым содержанием данных. Вы можете использовать различные варианты и управлять более сложными данными, поэтому ваш результат может отличаться. Но всегда принимайте во внимание варианты для лучшего опыта взаимодействия (UX).
Источник: allthingssmitty.com
Как сделать таблицу адаптивной
Вы здесь:
 Главная					 — 			CSS					 — 			CSS3					 — 			Как сделать таблицу адаптивной
 Если бы таблицы могли хорошо адаптироваться под разные разрешения экранов, то человечество и по сей день делало бы табличную верстку. Я ещё застал то время и знаю, о чем говорю.
Однако мы живем в другое время, табличная верстка канула в лету, но потребность в использовании классических таблиц на сайтах все равно осталась. Поэтому мы не будем отрицать существование таблиц, а лучше узнаем о самом простом способе, как сделать таблицу адаптивной.
Демонстрация адаптивной таблицы. 
HTML разметка 
 
<div>

<table>

<tr>

<th>Имя</th>

<th>Фамилия</th>

<th>Баллы</th>

<th>Баллы</th>

<th>Баллы</th>

<th>Баллы</th>

<th>Баллы</th>

<th>Баллы</th>

<th>Баллы</th>

<th>Баллы</th>

<th>Баллы</th>

<th>Баллы</th>

</tr>

<tr>

<td>Юлия</td>

<td>Смирнова</td>

<td>50</td>

<td>50</td>

<td>50</td>

<td>50</td>

<td>50</td>

<td>50</td>

<td>50</td>

<td>50</td>

<td>50</td>

<td>50</td>

</tr>

<tr>

<td>Эвелин</td>

<td>Яковлева</td>

<td>94</td>

<td>94</td>

<td>94</td>

<td>94</td>

<td>94</td>

<td>94</td>

<td>94</td>

<td>94</td>

<td>94</td>

<td>94</td>

</tr>

<tr>

<td>Андрей</td>

<td>Петров</td>

<td>67</td>

<td>67</td>

<td>67</td>

<td>67</td>

<td>67</td>

<td>67</td>

<td>67</td>

<td>67</td>

<td>67</td>

<td>67</td>

</tr>

</table>

</div>  
 Мы создали простенькую HTML таблицу, пока она помещается на экране, все OK. При уменьшении ширины экрана, таблица будет срезаться и мы не увидим её данных или она станет очень мелкой и мы опять ничего не увидим.
 
Вы наверное заметили, что я поместил таблицу внутри тега div и очевидно не просто так. Сам по себе тег div ничего не даёт, пока мы не пропишем ему стили.
CSS стили 
Задав всего одно свойство, таблица адаптируется, автоматически появится горизонтальная полоса прокрутки, когда содержимое внутри тега div перестанет влезать в текущую ширину экрана по оси X.
 
div (

  overflow-x: auto;

) 
Стилизуем остальные теги таблицы:
 
table {

  border-collapse: collapse; /* Отображать только одинарные линии */

  border-spacing: 0; /* Расстояние между ячейками */

  width: 100%; 

  border: 1px solid #afb42b;

  color: #212121;

}th, td {

  text-align: left;

  padding: 8px;

}
Стилизация тега tr (ряд) заслуживает отдельного комментария. Уже стало нормой, когда табличные ряды имеют полосатый вид (зебра). Для этого используется псевдокласс :nth-child со значение в скобочках even. Значение even, всем четным элементам присваивает свойства, в нашем случае – это цвет фона. Таким образом, таблица будет полосатой.
 
tr:nth-child(even){

  background-color: #f0f4c3

}  

На каком бы вы этапе изучения сайто-строительства не находились, увидеть как прямо на ваших глазах верстают сайт и нанимают специалистов на фриланс бирже, вы можете в видео-курсе под названием «О создании лендинга под ключ».
 
 Создано 26.10.2018 10:00:26
 
 Михаил Русаков
  
 Предыдущая статья		Следующая статьяКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

 Кнопка: 
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так: 


 Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт

BB-код ссылки для форумов (например, можете поставить её в подписи): 
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Адаптивная таблица (как сделать адаптивную таблицу Table на CSS
Каждый верстальщик рано или поздно сталкивается с вопросом адаптации таблиц под планшеты и мобильные устройства. На сам деле это действительно проблема, табличная верстка не предназначена для таких целей. Во времена когда ее часто использовали, ни кто и предположить не мог что технологии адаптации шагнут так далеко. Но отказаться на все 100% от табличной верстки мы не можем. Она до сих пор встречается на сайтах, в интернет магазинах. Обычно это списки заказов, либо характеристики товаров. Почему так? Потому что такие таблички не просто сверстать дивами (div) и зациклить т.к. функционал движков будет выводить эти характеристики в цикле. Но тогда возникает вопрос, как же сделать адаптивную таблицу? Да еще что бы не дописывать в нее классы, для всех таблиц? Есть решение. И так, приступим.
 
Для начала вы можете скачать и взглянуть как работает адаптивная таблица.
 
Долго и нудно объяснять не вижу смысла. По сути все что вам нужно сделать, это дописать стили: table {text-align: center;}  @media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {  /* Force table to not be like tables anymore */
 table, thead, tbody, th, td, tr { 
 display: block; 
 } 
 /* Hide table headers (but not display: none;, for accessibility) */
 thead tr { 
 position: absolute;
 top: -9999px;
 left: -9999px;
 } 
 tr { border: 1px solid #ccc; } 
 td { 
 /* Behave  like a «row» */
 border: none!important;
 width: 100%!important; 
 position: relative;
 padding-left: 50%; 
 } 
 td:before { 
 /* Now like a table header */
 position: absolute;
 /* Top/left values mimic padding */
 top: 6px;
 left: 6px;
 width: 45%; 
 padding-right: 10px; 
 white-space: nowrap;
 } 
 /*
 Label the data
 */  }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 table {text-align: center;}
 
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
 
 /* Force table to not be like tables anymore */
 table, thead, tbody, th, td, tr {
 display: block;
 }
 /* Hide table headers (but not display: none;, for accessibility) */
 thead tr {
 position: absolute;
 top: -9999px;
 left: -9999px;
 }
 tr { border: 1px solid #ccc; }
 td {
 /* Behave  like a «row» */
 border: none!important;
        width: 100%!important;
 position: relative;
 padding-left: 50%;
 }
 td:before {
 /* Now like a table header */
 position: absolute;
 /* Top/left values mimic padding */
 top: 6px;
 left: 6px;
 width: 45%;
 padding-right: 10px;
 white-space: nowrap;
 }
 /*
 Label the data
 */
 
}
В моем варианте я вовсе скрываю хедер таблицы, названия, они мне не нужны. В архиве вы можете увидеть как их оставить, они прописываются через свойство before. На этом все, адаптивная таблица готова. Если у вас есть вопросы, всегда рад помочь.
Как легко адаптировать HTML-таблицу под мобильные устройства?
На сегодняшний день HTML-таблицы утратили свою популярность в верстке элементов дизайна и были заменены блоками (header, menu, div, footer и др.), но они до сих пор применяются в области структуризации и представлении данных пользователям.
Часто, вставленная таблица в тело документа, не адаптирована под мобильные устройства, если это не было определено заранее в правилах CSS. Получается, что адаптивная верстка будет подстраиваться под границы экрана, а таблица может только сжиматься, оставляя некоторую область за пределами дисплея.
Этот материал касается простых таблиц без заголовков, с ячейками, содержащими только основную информацию. Более сложный вариант рассматривается в следующем уроке.
Создадим таблицу с перечислением некоторых цветов каталога Pantone в каждой из 6-и ячеек.
PANTONE 224 PANTONE 225 PANTONE 226 PANTONE 227 PANTONE 228 PANTONE 229
HTML-код:
<table>
<tbody>
<tr>
<td>PANTONE 224</td>
<td>PANTONE 225</td>
<td>PANTONE 226</td>
<td>PANTONE 227</td>
<td>PANTONE 228</td>
<td>PANTONE 229</td>
</tr>
</tbody>
</table>
CSS-код:
table.pantone {width: 100%; border-collapse: collapse;}
table.pantone td {padding: 0.6rem 1rem; color: #ffffff; font-weight: bold;}
С помощью изображения приведу то, как будет выглядеть полноценная таблица при фиксированной ширине 1140 пикс.
А теперь вид таблицы с уменьшенным разрешением экрана, которое используется в мобильных устройствах.
Видим, что вся информация, представленная в таблице, не входит в область экрана. Добавим к ячейкам правило CSS:
@media screen and (max-width: 800px) {
  table.pantone td {display: block;}
}
Это значит, что при разрешении экрана менее 800 пикс., ячейки таблицы станут блоками, выстраиваясь сверху вниз.
Таким образом, мы рассмотрели, как легко привести табличный формат к адаптивному дизайну.
 228 просмотров всего, 1 просмотров сегодня
Адаптивные решения таблиц для сравнения особенностей
От автора: адаптивный веб-дизайн и таблицы далеко не лучшие друзья. Многие сталкивались с различными ситуациями, и вследствие чего были выработаны определенные подходы. Тем не менее, мы все еще далеки от идеальных решений, и поиски продолжаются.
В то время как некоторые проблемы достаточно сложны, отдельные конкретные ситуации можно разобрать, уделив им чуть больше внимания. Я говорю о таблицах сравнения особенностей. Мы сталкиваемся с ними везде – при выборе авто мы решаем какие дополнительные функции включить в комплектацию; во время выбора тарифов веб-хостинга; на любом портале с личным кабинетом, где вы решаете, какую информацию вы хотите получать. За все это вы платите деньги.
Так как такой вид таблиц имеет достаточно стабильную и последовательную архитектуру, то вполне можно добиться лучшего поведения данных таблиц на маленьких экранах.
Анатомия таблиц сравнения особенностей
В классической таблице сравнения представлено, как минимум, три продукта (в колонках), а их особенности расположены в строках ниже. В такой структуре обычно первая ячейка каждой строки носит название объекта, а в клетках под продуктами есть галочки, показывающие, есть ли данная функция у этого товара. Примеры классической структуры можно найти: здесь и здесь. Основываясь на этих примерах, мы можем обобщить структуру таблиц сравнения, ниже представлен код:
 Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнее <table>
 <thead>
 <tr>
 <th>&nbsp;</th>
 <th>Продукт 1</th>
 <th>Продукт 2</th>
 <th>Продукт 3</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Функция 1</td>
 <td>&#10004;</td>
 <td>&#10004;</td>
 <td>&#10004;</td>
 </tr>
 <tr>
 <td>Функция 2</td>
 <td>&mdash;</td>
 <td>&#10004;</td>
 <td>&#10004;</td>
 </tr>
 <tr>
 <td>Функция 3</td>
 <td>&mdash;</td>
 <td>&mdash;</td>
 <td>&#10004;</td>
 </tr>
 <tr>
 <td>Функция 4</td>
 <td>&mdash;</td>
 <td>&mdash;</td>
 <td>&#10004;</td>
 </tr>
 </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 <table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Функция 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Функция 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Функция 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Функция 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>
Достаточно легко заметить упомянутые выше элементы: название продукта, название функции и метка, показывающая принадлежность к товару. Обратите внимание, что код &#10004;отображает символ галочки. А теперь вернемся к корню проблемы. Должны быть соблюдены несколько условий, чтобы таблицы вели себя адекватно на маленьких экранах:
Пользователь должен с легкостью различать товары;
Функции должны быть легко узнаваемы;
И должно быть понятно, когда функция принадлежит товару, а когда нет.
Лучшее решение – сместить ячейки с названием функций над другими тремя ячейками, обозначающими наличие или отсутствие функции.
Первый способ: Flexbox
И как же добиться этого? Одним из решений станет flexbox. Если же вы не знаете, что это такое, или забыли, вы можете почитать недавнюю статью от NickSalloum по данной теме. А все остальные могут смело читать дальше.
Первым делом, необходимо убедиться, что изменения вступают в силу только на маленьких экранах. Для этого применим медиа запрос, используя классическое значение ширины экрана в 768px.
 @media screenand (max-width: 768px) {
 tr {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-around;
 }
 
 td, th {
 display: block;
 width: 33%;
 }
 
 th:first-child,
 td:first-child {
 text-align: center;
 background: #efefef;
 width: 100%;
 }
 
 th:first-child {
 display: none;
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 @media screenand (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  td, th {
    display: block;
    width: 33%;
  }
  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }
  th:first-child {
    display: none;
  }
}
Чтобы наша магия сработала, необходимо знать парочку важных правил:
Мы меняем значение свойства display для строк таблицы на flex, тем самым приказывая дочерним элементам выстроиться в ряд с одинаковыми интервалами.
 Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнееДалее мы присваиваем ячейкам таблицы значение display: block, чтобы сделать их обычными контейнерами (если оставить значение по умолчанию, то будут применены свойства таблиц, особенно это касается размеров).
Следующим шагом будет выделить первую ячейку каждой строки и растянуть ее на всю ширину, изменив цвет фона для контраста. По правилам обтекания эта ячейка останется сверху – то, что нам и нужно.
И в завершении мы прячем первый th, чтобы не отображалось пустых блоков над названиями продуктов.
Демо можно посмотреть по ссылке.
Естественно, данное решение справедливо, пока оно работает. По данным сайта caniuse.com flexbox под держивается в более чем 80% современных браузеров, и в 93%, если учесть браузеры, поддерживающие вендорные префиксы или использующие старые версии flexbox. IE поддерживается с 10 версии (только синтаксис 2012 года), IE11 имеет полную поддержку. Так как нас интересует поддержка только на маленьких экранах, то мы можем пренебречь поддержкой IE. На мобильных устройствах поддержка начинается с Android 4.4 и iOS 7.1. Для предыдущих версий требуются вендорные префиксы, а также в них не поддерживаются функции обертки.
Также необходимо делать фоллбэки, как, например, div для скроллинга в Bootstrap.
Второй способ: Экстра разметка + ARIA-роли
Если в части браузеров, которые вы собираетесь поддерживать, отсутствует поддержка flexbox, существует альтернатива. Данный метод я использовал в своем проекте в 2013 году. Нужно немного экстра разметки: необходимо добавить один экстра ряд, дублирующий название функции. Это может быть немного утомительным занятием, если заниматься этим вручную. Однако данный процесс можно автоматизировать, если считывать информацию из источника данных. В конце концов, наш код, описанный выше, должен выглядеть так:
 <table>
 <thead>
 <tr>
 <th>&nbsp;</th>
 <th>Продукт 1</th>
 <th>Продукт 2</th>
 <th>Продукт 3</th>
 </tr>
 </thead>
 <tbody>
 <tr aria-hidden=»true»>
 <td>&nbsp;</td>
 <tdcolspan=»3″>Функция 1</td>
 </tr>
 <tr>
 <td>Функция 1</td>
 <td>&#10004;</td>
 <td>&#10004;</td>
 <td>&#10004;</td>
 </tr>
 <tr aria-hidden=»true»>
 <td>&nbsp;</td>
 <tdcolspan=»3″>Функция 2</td>
 </tr>
 <tr>
 <td>Функция 2</td>
 <td>&mdash;</td>
 <td>&#10004;</td>
 <td>&#10004;</td>
 </tr>
 <tr aria-hidden=»true»>
 <td>&nbsp;</td>
 <tdcolspan=»3″>Функция 3</td>
 </tr>
 <tr>
 <td>Функция 3</td>
 <td>&mdash;</td>
 <td>&mdash;</td>
 <td>&#10004;</td>
 </tr>
 <tr aria-hidden=»true»>
 <td>&nbsp;</td>
 <td colspan=»3″>Функция 4</td>
 </tr>
 <tr>
 <td>Функция 4</td>
 <td>&mdash;</td>
 <td>&mdash;</td>
 <td>&#10004;</td>
 </tr>
 </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52 <table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr aria-hidden=»true»>
      <td>&nbsp;</td>
      <tdcolspan=»3″>Функция 1</td>
    </tr>
    <tr>
      <td>Функция 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr aria-hidden=»true»>
      <td>&nbsp;</td>
      <tdcolspan=»3″>Функция 2</td>
    </tr>
    <tr>
      <td>Функция 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr aria-hidden=»true»>
      <td>&nbsp;</td>
      <tdcolspan=»3″>Функция 3</td>
    </tr>
    <tr>
      <td>Функция 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr aria-hidden=»true»>
      <td>&nbsp;</td>
      <td colspan=»3″>Функция 4</td>
    </tr>
    <tr>
      <td>Функция 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>
CSSкод также достаточно прост:
 .visible-xs {
 display: none;
}
 
@media screenand (max-width: 768px) {
 .visible-xs {
 display: table-row;
 }
 
 td:first-child,
 th:first-child {
 display: none;
 }
}
.visible-xs {
  display: none;
}
@media screenand (max-width: 768px) {
  .visible-xs {
    display: table-row;
  }
  td:first-child,
  th:first-child {
    display: none;
  }
}
Ради доступности можно пойти на такой дополнительный шаг и скрыть экстра разметку с помощью aria-hidden=»true». Таким образом, браузеры, уважающие спецификацию aria-hidden, не будут считывать дублирующий контент дважды.
Демо второго метода
Заключение
В данной статье мы разобрали два способа по созданию адаптивных таблиц сравнения. Оба способа имеют свои плюсы и минусы. В конечном итоге ваш выбор должен пасть на определенный метод в зависимости от специфики задачи и вашей аудитории. В большинстве случаев первого способа (с фоллбэками) должно хватить. Если вам и вправду необходимо поддерживать старые версии Android и iOS, вы можете воспользоваться вторым способом. В любом случае, не важно, каким методом вы воспользуетесь, таблицы сравнения функций будут выглядеть намного лучше на маленьких экранах.
Автор: Adrian Sandu
Источник: http://www.sitepoint.com/
Редакция: Команда webformyself.
 Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнее PSD to HTML
Практика верстки сайта на CSS Grid с нуля
 Смотреть