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