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

Эпоха мобильных устройств диктует свои правила. Если раньше таблицы 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;
}

Результат:

Способ № 2.

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

Разметка HTML

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

Результат:

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

Способ № 3.

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

Разметка HTML

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

Результат:

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

Заключение

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

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