Таблицы адаптивные css: Адаптивная таблица на чистом CSS

Содержание

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

Эпоха мобильных устройств диктует свои правила. Если раньше таблицы 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 с нуля
 СмотретьПростая адаптивная таблица — dr.Brain
Адаптивные таблицы — оказывается мы нуждаемся в них гораздо чаще, чем думаем. Обычно, когда есть необходимость создать таблицу для адаптивного сайта, мы делаем собственную разметку или обращаемся к уже существующим сторонним библиотекам. Не нужно этого делать. Полагаю, что обычных HTML таблиц и несложных свойств CSS будет достаточно.
Ниже мы рассмотрим два приема, позволяющие адаптировать вертску таблиц к мобильных устройствам. Несмотря на отсутствие стопроцентного совершенства, каждый из предложенных приемов предлагает достаточно завершенное решение, не вызывающее отторжение у пользователя.
Прием 1
Горизонтальный скролл
Нужно признаться, что такое решение точно не претендует на Нобелевскую премию (оно, вообще, ни на что не претендует), но оно работает. Это верный выбор при выводе в таблицу больших объемов данных. Нужно просто установить фиксированное значение для свойства min-width элемента table и для просмотра данных на мобильном устройстве пользователю придется делать горизонтальный скролл.
table{
    min-width: 800px; /* устанавливаем желаемую минимальную ширину экрана */
}
Пример на codepen.io:
Этот метод прост в реализации. Пользователи мобильных устройств обычно не испытывают негативных эмоций при скролле, так как в данном случае это одно из наиболее часто воспроизводимых действий. Визуальная реализация на экране неполной или, иными словами, “обрезанной” таблицы дает четкое понимание дальнейших необходимых для просмотра контента действий со стороны пользователя.
Прием 2
Добавим гибкости
Если мы работаем с малыми наборами данных, будет полезен 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%;
    }
}
Пример на codepen.io:
А вот и проблемы, как результат такого решения:
Мы визуально скрываем столбец с заголовками thead, что в определенных случаях значительно затрудняет понимание содержимого таблицы,
Макет такой таблицы не универсален и требует доработки, в зависимости от того, какие данные и в каком объеме представлены в таблице.
Манипуляции с заголовками носят сугубо индивидуальный харктер. Я могу предложить три варианта представления заголовков thead для мобильных устройств в таблице:
заголовки можно скрыть,
заголовки можно стилизовать, используя все тот же flexbox,
заголовки можно перенести в span и поместить их в ячейки с данными.
Ниже приведены стили для вывода заголовков в дополнителыном элементе на мобильных устройствах:
/* Для настольных компьютеров скрываем 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;
}

/* Стили для мобильных устройств */
@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;
    }
}
Пример на codepen.io:
Зачем мне нужны таблицы?
Все очень просто: такой подход семантически верен.
Зачем использовать отвертку, когда нужен молоток. Конечно, вы можете сделать отвертку, похожую на молоток. Возможно, она даже будет работать почти как молоток. Но зачем все это? Просто возьми молоток и используй по назначению.
Спасибо за внимание.
Адаптивная таблица 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
Сложно представить сайт без таблиц. Существует вагон и маленькая тележка способов реализации адаптивного вывода таблиц. Можно использовать готовые фреймворки, разную экзотику на JS, но разумнее всего делать таблицы на CSS. На нем и рассмотрим парочку боевых примеров.
Сразу отмечу, решение не мое, а известного канадского веб-разработчика Брэдли Таунта.
1. Разрешить скроллинг таблиц
Первый способ заключается в разрешении горизонтального скролла. Да, решение не самое элегантное, но иногда вывести многоколоночную таблицу удается только так и с этим приходится мириться.
Просто задаем минимальную ширину родительского элемента таблицы, и браузер потребует от пользователя прокручивать содержимое по горизонтали.
table {
    min-width: 800px; /* Set your desired min-width here */
}
Получится так:
Многие этим и ограничиваются, но можно пойти дальше.
2. Добавить гибкости
В основе решения лежат флексбоксы со всеми вытекающими приятными последствиями.
/* Using 800px as mobile screen in this example */
@media(max-width: 800px) {
    /* Hide the table headings */
    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; /* Removes double-borders */
        width: 50%;
    }
}
На выходе получаем такое:
В примере выше заголовки таблицы скрыты, чтобы не засорять ее. Но мы можем вывести и их. Например, так:
/* Default span styling - hidden on desktop */
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;
}

/* Simple CSS for flexbox table on mobile */
@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; /* additional padding to avoid heading overlap */
        position: relative;
        width: 50%;
    }
    /* Show the heading span */
    table td span {
        display: block;
    }
}
Как видим, способы сильно отличаются. И здесь важно понимать в контексте конкретного проекта, что использовать: молоток или отвертку.
Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.
Как сделать таблицу адаптивной
Вы здесь:
 Главная					 — 			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]

Адаптивные решения таблиц для сравнения особенностей
От автора: адаптивный веб-дизайн и таблицы далеко не лучшие друзья. Многие сталкивались с различными ситуациями, и вследствие чего были выработаны определенные подходы. Тем не менее, мы все еще далеки от идеальных решений, и поиски продолжаются.
В то время как некоторые проблемы достаточно сложны, отдельные конкретные ситуации можно разобрать, уделив им чуть больше внимания. Я говорю о таблицах сравнения особенностей. Мы сталкиваемся с ними везде – при выборе авто мы решаем какие дополнительные функции включить в комплектацию; во время выбора тарифов веб-хостинга; на любом портале с личным кабинетом, где вы решаете, какую информацию вы хотите получать. За все это вы платите деньги.
Так как такой вид таблиц имеет достаточно стабильную и последовательную архитектуру, то вполне можно добиться лучшего поведения данных таблиц на маленьких экранах.
Анатомия таблиц сравнения особенностей
В классической таблице сравнения представлено, как минимум, три продукта (в колонках), а их особенности расположены в строках ниже. В такой структуре обычно первая ячейка каждой строки носит название объекта, а в клетках под продуктами есть галочки, показывающие, есть ли данная функция у этого товара. Примеры классической структуры можно найти: здесь и здесь. Основываясь на этих примерах, мы можем обобщить структуру таблиц сравнения, ниже представлен код:
 Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на 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 с нуля
 Смотреть Адаптивная таблица. Несколько способов реализации. — Digital-студия Лантана 
 Эпоха мобильных устройств диктует свои правила. Если раньше таблицы html, как правило, видели пользователи системы компьютеров, то сейчас, в первую очередь, нужно позаботиться о том, чтобы эти таблицы отображались корректно и на смартфонах и планшетах.
 В этой статье реализуем несколько способов сделать адаптивную таблицу.
 Способ № 1. 
 Данный способ предполагает использование обертки для таблицы. Задав свойство overflow-x: auto контейнеру-обертке, мы получим нужный результат: если таблица не будет помещаться на экран, то появится горизонтальный скроллинг.
 Разметка HTML 
 
  
 CSS 
 
.table-wrap {
переполнение-x: авто;
}
Таблица.Таблица 1 {
    граница-коллапс: коллапс;
    граница-интервал: 0;
    ширина: 100%;
}
table.table-1 tr {
цвет фона: # f8f8f8;
}
table.table-1 th, table.table-1 td {
выравнивание текста: слева;
    отступ: 8 пикселей;
    граница: 1px solid #ddd;
}

table.table-1 th {
font-weight: жирный;
}
 
 
 Результат: 
 Фамилия  Имя  Отчество  Дата рождения  Пол  Страна  Паспорт  Телефон
 Иванов  Иван  Иванович  18.08.1995  Мужской  Россия  589047  12345678
 Джонн  Смитт  Олегович  18.08.1980  Мужской  Англия  789047  81324567
 Ковалева  Екатерина  Дмитриевна  18.08.19680  Женский  Казахстан  289047  12357458
 
 Способ № 2. 
 Следующее устройство способ адаптировать таблицу под мобильные тоже довольно простой. Здесь нам нужно всего лишь перевести элементы td, th в блоки. Напомним, что по умолчанию свойство display для этих элементов равно table-cell.
 Разметка HTML 
  
 Третий способ является наиболее элегантным решением.Единственное неудобство в том, что нам придется дублировать в html заголовки в каждой ячейке td.
 Существуют и другие методы сделать адаптивную таблицу, в том числе и использовать плагинов jQuery или на чистом JavaScript. Можно также воспользоваться решениями, которые предоставляют такие фреймворки как Bootstrap.
 Если у вас есть свои оригинальные способы, пожалуйста, пишите в комментариях, делитесь своим опытом с другими разработчиками.
. Простая адаптивная таблица — dr.Brain 
 Адаптивные таблицы — оказывается мы нуждаемся в них гораздо чаще, чем думаем. Обычно, когда есть необходимость создать таблицу для адаптивного сайта, мы создаем разметку или обращаемся к уже существующим сторонним библиотекам. Не нужно этого делать. Полагаю, что обычных HTML таблиц и несложных свойств CSS будет достаточно.
 Ниже мы рассмотрим два приема, позволяющие адаптировать вертску таблиц к мобильным устройствам.Несмотря на отсутствие стопроцентного совершенства, каждый из предложенных приемов предлагает достаточно завершенное решение, не вызывающее отторжение у пользователя.
 Прием 1 
 Горизонтальный скролл 
 Нужно признаться, что такое решение точно не претендует на Нобелевскую премию (оно, вообще, ни на что не претендует), но оно работает. Это верный выбор при выводе в таблицу больших объемов данных. Нужно просто установить фиксированное значение для свойств  min-width  элемент  table  и для просмотра данных на мобильном устройстве придется делать горизонтальный скролл.
  стол {
    минимальная ширина: 800 пикселей; / * устанавливаем желаемую минимальную ширину экрана * /
}
  
 Пример на codepen.io:
 Этот метод прост в реализации. Пользователи мобильных устройств обычно не испытывают негативных эмоций при скролле, так как это одно из наиболее часто воспроизводимых действий. Визуальная реализация на экране неполной или «обрезанной» таблицы дает четкое понимание дальнейших необходимых для просмотра контента действий со стороны пользователя.
 Прием 2 
 Добавим гибкости 
 Если мы работаем с малыми наборами данных, будет полезен  flexbox . Давайте добавим  позиционирование  для элементов таблицы, вывода на экран мобильного устройства (то есть при минимальной ширине экрана).
  / * Ширина экрана до 800px будет относиться к мобильным устройствам * /
@media (max-width: 800 пикселей) {
        / * Скрываем заголовки таблицы * /
        table thead {
        слева: -9999 пикселей;
        позиция: абсолютная;
        видимость: скрыта;
    }
    table tr {
        нижняя граница: 0;
        дисплей: гибкий;
        flex-direction: ряд;
        flex-wrap: обертка;
        нижнее поле: 40 пикселей;
    }
    table td {
        граница: сплошная 1px;
        маржа: 0 -1px -1px 0; / * объединяем границы ячеек * /
        ширина: 50%;
    }
}
  
 Пример на codepen.io:
 А вот и проблемы, как результат такого решения:
 Мы визуально скрываем столбец с заголовками ad , что в некоторых случаях значительно затрудняет понимание содержимого таблицы
 Макет такой таблицы не универсален и требует доработки, в зависимости от того, какие данные и в каком объеме представлены в таблице.
 Манипуляции с заголовками носят сугубо индивидуальный харктер. Я могу предложить три варианта представления заголовков  thead  для мобильных устройств в таблице:
 заголовки можно скрыть,
 заголовки можно стилизовать, используя все тот же  flexbox ,
 заголовки можно перенести в  span  и поместить их в ячейки с данными.
 Ниже приведены стили для вывода заголовков в дополнитном элементе на мобильных устройствах:
  / * Для настольных компьютеров скрываем span * /
table td span {
    фон: #eee;
    цвет: тускло-серый;
    дисплей: нет;
    размер шрифта: 10 пикселей;
    font-weight: жирный;
    отступ: 5 пикселей;
    позиция: абсолютная;
    текст-преобразование: прописные;
    верх: 0;
    слева: 0;
}

/ * Стили для мобильных устройств * /
@media (max-width: 800 пикселей) {
    table thead {
        слева: -9999 пикселей;
        позиция: абсолютная;
        видимость: скрыта;
    }
    table tr {
        нижняя граница: 0;
        дисплей: гибкий;
        flex-direction: ряд;
        flex-wrap: обертка;
        нижнее поле: 40 пикселей;
    }
    table td {
        граница: сплошная 1px;
        маржа: 0 -1px -1px 0;
        padding-top: 35 пикселей; / * дополнительный отступ, чтобы избежать наложения заголовка * /
        положение: относительное;
        ширина: 50%;
    }
    / * Показываем диапазон для мобильных устройств * /
    table td span {
        дисплей: блок;
    }
}
  
 Пример на codepen.io:
 Зачем мне нужны таблицы? 
 Все очень просто: такой подход  семантически верен .
 Зачем использовать отвертку, когда нужен молоток. Конечно, вы можете сделать отвертку, похожую на молоток. Возможно, она даже будет работать почти как молоток. Но зачем все это? Просто возьми молоток и используй по назначению.
 Спасибо за внимание.
 .No related posts.