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