Блог об интернет-маркетинге

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

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

Способ № 1

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

Разметка HTML


<div class="table-wrap"><table class="table-1"><tr><th>Фамилия</th><th>Имя</th><th>Отчество</th><th>Дата рождения</th><th>Пол</th><th>Страна</th><th>Паспорт</th><th>Телефон</th></tr><tr><td>Иванов</td><td>Иван</td><td>Иванович</td><td>18.08.1995</td><td>Мужской</td><td>Россия</td><td>589047</td><td>12345678</td></tr><tr><td>Джонн</td><td>Смитт</td><td>Олегович</td><td>18.08.1980</td><td>Мужской</td><td>Англия</td><td>789047</td><td>81324567</td></tr><tr><td>Ковалева</td><td>Екатерина</td><td>Дмитриевна</td><td>18.08.19680</td><td>Женский</td><td>Казахстан</td><td>289047</td><td>12357458</td></tr></table>
</div>

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;
}

Результат:

Способ № 2

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

Разметка HTML

<div class="table-wrap"><table class="table-2"><tr><th>Фамилия</th><th>Имя</th><th>Отчество</th><th>Дата рождения</th><th>Пол</th><th>Страна</th><th>Паспорт</th><th>Телефон</th></tr><tr><td>Иванов</td><td>Иван</td><td>Иванович</td><td>18.08.1995</td><td>Мужской</td><td>Россия</td><td>589047</td><td>12345678</td></tr><tr><td>Джонн</td><td>Смитт</td><td>Олегович</td><td>18.08.1980</td><td>Мужской</td><td>Англия</td><td>789047</td><td>81324567</td></tr><tr><td>Ковалева</td><td>Екатерина</td><td>Дмитриевна</td><td>18.08.19680</td><td>Женский</td><td>Казахстан</td><td>289047</td><td>12357458</td></tr></table>
</div>

CSS

table.table-2 {border-collapse: collapse;border-spacing: 0;width: 100%;
}
table.table-2 tr {
	background-color: #f8f8f8;
}
table.table-2 th, table.table-2 td {
	text-align: left;padding: 8px;border: 1px solid #ddd;
}

table.table-2 th{
	font-weight: bold;
}

@media screen and (max-width: 600px) {
	table.table-2 tr{
		display: block;
	}
	table.table-2 tr{
		margin-bottom: 30px;
	}
	table.table-2 th, table.table-2 td{
		display: block;
		text-align: center;
	}
}

Результат:

Способ № 3

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

Разметка HTML

<table class="table-3"><thead><tr><th>Фамилия</th><th>Имя</th><th>Отчество</th><th>Дата рождения</th><th>Пол</th><th>Страна</th><th>Паспорт</th><th>Телефон</th></tr></thead><tbody><tr><td data-label="Фамилия">Иванов</td><td data-label="Имя">Иван</td><td data-label="Отчество">Иванович</td><td data-label="Дата рождения">18.08.1995</td><td data-label="Пол">Мужской</td><td data-label="Страна">Россия</td><td data-label="Паспорт">589047</td><td data-label="Телефон">12345678</td></tr><tr><td data-label="Фамилия">Джонн</td><td data-label="Имя">Смитт</td><td data-label="Отчество">Олегович</td><td data-label="Дата рождения">18.08.1980</td><td data-label="Пол">Мужской</td><td data-label="Страна">Англия</td><td data-label="Паспорт">789047</td><td data-label="Телефон">81324567</td></tr><tr><td data-label="Фамилия">Ковалева</td><td data-label="Имя">Екатерина</td><td data-label="Отчество">Дмитриевна</td><td data-label="Дата рождения">18.08.19680</td><td data-label="Пол">Женский</td><td data-label="Страна">Казахстан</td><td data-label="Паспорт">289047</td>
      <td data-label=Телефон"">12357458</td></tr></tbody>
</table>

CSS

table.table-3 {border-collapse: collapse;border-spacing: 0;width: 100%;
}
table.table-3 tr {
		background-color: #f8f8f8;
}

table.table-3 th,
table.table-3 td {
		text-align: left;
	 	padding: 8px;
	border: 1px solid #ddd;
}
@media screen and (max-width: 600px) {
  	table.table-3 {
		border: 0;
  	}

  
  
  	table.table-3 thead {
	    border: none;
	    clip: rect(0 0 0 0);
	    height: 1px;
	    margin: -1px;
	    overflow: hidden;
	    padding: 0;
	    position: absolute;
	    width: 1px;
  	}
  
  	table.table-3 tr {
    	border-bottom: 1px solid #ddd;
    	display: block;
   		margin-bottom: 30px;
  	}
  
	table.table-3 td {
    	display: block;
    	text-align: right;
	}
  
	table.table-3 td::before {
	    content: attr(data-label);
	    float: left;
	    font-weight: bold;
	    text-transform: uppercase;
	}
  
  	table.table-3 td:last-child {
    	border-bottom: 0;
  	}
}

Результат:

Заключение

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