Как сделать адаптивную таблицу html

Простой (и довольно грубый) способ создания адаптивных таблиц

В настоящее время существует множество способов создания адаптивных таблиц.

1. Некоторые сложно реализовать в реальных условиях, особенно если в них используются псевдоэлементы ::before для генерации заголовков таблицы.
2. Некоторые из них (например, круговую диаграмму) можно использовать только для определенных типов табличных данных.
3. Другие же решения могут сбить с толку конечного пользователя, в частности — решение с пропадающими столбцами.

Хотите увидеть суперпростой способ сделать таблицу адаптивной? Способ, содержащий всего лишь пару строк CSS и не требующий JavaScript? Взгляните:

Способ 1: Суперпростой

Все, что вам нужно сделать — обернуть таблицу в div :

class="table-container"> table> . table> div> 

И потом добавить простые стили:

.table-container < width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; > 

Способ 2: Добавление скроллбаров для iOS

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

.table-container::-webkit-scrollbar < -webkit-appearance: none; width: 14px; height: 14px; > .table-container::-webkit-scrollbar-thumb < border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); > 

Способ 3: Скроллбары для всех

Если вы хотите заставить все браузеры и устройства отображать скроллбары, то для этого существует целый ряд решений на jQuery:

Способ 4: Добавление градиента

Вы заметили, что таблица выглядит «обрезанной» с правого края? Для придания ему эффекта «растворения» вы можете использовать linear-gradient . Чтобы все хорошо работало на экране любого размера или во время прокрутки пользователем, мы добавим в разметку два новых элемента:

div class="table-container-outer"> div class="table-container-fade"> div> div class="table-container"> table> . table> div> div> div> 

.table-container-outer < position: relative; > .table-container-fade < position: absolute; right: 0; width: 30px; height: 100%; background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff); background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff); background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff); background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff); background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff); > 

Итак, вот они, несколько простых (и довольно грубых) решений для создания адаптивных таблиц.

Адаптивная таблица на чистом CSS

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

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

Первый способ адаптации

div class="table-wrap"> 
table> 
thead> 
tr> 
th>Услугаth> 
th>Описаниеth> 
th>Ценаth> 
th>Скидкаth> 
tr> 
thead> 
tbody> 
tr> 
td>Мобильная версткаtd> 
td>Верстка под телефоныtd> 
td>$3000td> 
td>50%td> 
tr> 
tr> 
td>Посадка на CMS WordPresstd> 
td>Создание сайта с админ. панельюtd> 
td>$3000td> 
td>30%td> 
tr> 
tbody> 
table>
div>

Стилизуем все это дело (главным образом нам нужно стилизовать .table-wrap ).

.table-wrap  
text-align: center; 
display: inline-block; 
background-color: #fff; 
padding: 2rem 2rem; 
color: #000;
>

@media screen and (max-width: 600px)  
.table-wrap  
overflow-y: scroll; 
>
>

В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом. Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.

Второй способ адаптации

Для начала поменяем разметку:

div class="table-wrap"> 
table> 
thead> 
tr> 
th>Услугаth> 
th>Описаниеth> 
th>Ценаth> 
th>Скидкаth> 
tr> 
thead> 
tbody> 
tr> 
td data-label="Услуга">Мобильная версткаtd> 
td data-label="Описание">Верстка под телефоныtd> 
td data-label="Цена">$3000td> 
td data-label="Скидка">50%td> 
tr> 
tr> 
td data-label="Услуга">Посадка на CMS WordPresstd> 
td data-label="Описание">Создание сайта с админ. панельюtd> 
td data-label="Цена">$3000td> 
td data-label="Скидка">30%td> 
tr> 
tbody> 
table>
div>

В принципе, вы можете с помощью js сделать тоже самое, пробежавшись по всем td .

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

Задаем базовые стили:

body  
text-align: center; 
padding-top: 10%; 
font-family: sans-serif; 
background-image: url('bg.jpg'); 
background-size: cover; 
height: 100vh; 
color: #fff;

>
.table-wrap  
text-align: center; 
display: inline-block; 
background-color: #fff; 
padding: 2rem 2rem; 
color: #000;
>

table  
border: 1px solid #ccc; 
width: 100%; 
margin:0; 
padding:0; 
border-collapse: collapse; 
border-spacing: 0;
>

table tr  
border: 1px solid #ddd; 
padding: 5px;
>

table th, table td  
padding: 10px; 
text-align: center; 
border-right: 1px solid #ddd;
>

table th  
color: #fff; 
background-color: #444; 
text-transform: uppercase; 
font-size: 14px; 
letter-spacing: 1px;
>

Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело. Как это исправить? добавляем стили:

@media screen and (max-width: 600px)  
table  
border: 0; 
>
 
table thead  
display: none; 
>
 
table tr  
margin-bottom: 10px; 
display: block; 
border-bottom: 2px solid #ddd; 
>
 
table td  
display: block; 
text-align: right; 
font-size: 13px; 
border-bottom: 1px dotted #ccc; 
border-right: 1px solid transparent; 
>
 
table td:last-child  
border-bottom: 0; 
>
 
table td:before  
content: attr(data-label); 
float: left; 
text-transform: uppercase; 
font-weight: bold; 
>
>

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

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

Надеюсь, Вам было интересно читать данную информацию. До скорых встреч)

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

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

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

Для создания такой адаптивной таблицы нам понадобиться только css. Html c структура нашей таблицы должна выглядеть следующим образом :

  . .
 
 
head1
 
 
 
content1
 
 

Теперь рассмотрим наши css свойства. Будем использовать медиа-запрос @media для создания правил для маленьких экранов.

@media only screen and (max-width: 760px)

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

table < display: block;>thead < display: block; float: left; >tbody

Для отдельных ячеек таблицы зададим свойство td display: block;>, чтобы расположить их друг под другом. А для строк тела таблицы добавим свойство tbody tr

@media only screen and (max-width: 760px) < table < display: block; >thead < display: block; ; float: left; >tbody < display: block; white-space: nowrap; overflow-x: auto; >td tbody tr < display: inline-block; >>

@media only screen and (max-width: 760px) < table, thead, tbody, td < display: block; >thead < float: left; >tbody < white-space: nowrap; overflow-x: auto; >tbody tr < display: inline-block; >>

          
 
 
head1
 
head2
 
head3
 
head4
 
head5
 
 
 
 
content1
 
content2
 
content3
 
content4
 
content5
 
 
content1-2
 
content2-2
 
content3-2
 
content4-2
 
content5-2
 
 
content1-3
 
content2-3
 
content3-3
 
content4-3
 
content5-3
 
 
content1-4
 
content2-4
 
content3-4
 
content4-4
 
content5-4