Сложно представить сайт без таблиц. Существует вагон и маленькая тележка способов реализации адаптивного вывода таблиц. Можно использовать готовые фреймворки, разную экзотику на JS, но разумнее всего делать таблицы на CSS. На нем и рассмотрим парочку боевых примеров.
Сразу отмечу, решение не мое, а известного канадского веб-разработчика Брэдли Таунта.
1. Разрешить скроллинг таблиц
Первый способ заключается в разрешении горизонтального скролла. Да, решение не самое элегантное, но иногда вывести многоколоночную таблицу удается только так и с этим приходится мириться.
Просто задаем минимальную ширину родительского элемента таблицы, и браузер потребует от пользователя прокручивать содержимое по горизонтали.
table {
min-width: 800px; /* Set your desired min-width here */
}
Получится так:
Многие этим и ограничиваются, но можно пойти дальше.
2. Добавить гибкости
В основе решения лежат флексбоксы со всеми вытекающими приятными последствиями.
/* Using 800px as mobile screen in this example */
@media(max-width: 800px) {
/* Hide the table headings */
table thead {
left: -9999px;
position: absolute;
visibility: hidden;
}
table tr {
border-bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 40px;
}
table td {
border: 1px solid;
margin: 0 -1px -1px 0; /* Removes double-borders */
width: 50%;
}
}
На выходе получаем такое:
В примере выше заголовки таблицы скрыты, чтобы не засорять ее. Но мы можем вывести и их. Например, так:
/* Default span styling - hidden on desktop */
table td span {
background: #eee;
color: dimgrey;
display: none;
font-size: 10px;
font-weight: bold;
padding: 5px;
position: absolute;
text-transform: uppercase;
top: 0;
left: 0;
}
/* Simple CSS for flexbox table on mobile */
@media(max-width: 800px) {
table thead {
left: -9999px;
position: absolute;
visibility: hidden;
}
table tr {
border-bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 40px;
}
table td {
border: 1px solid;
margin: 0 -1px -1px 0;
padding-top: 35px; /* additional padding to avoid heading overlap */
position: relative;
width: 50%;
}
/* Show the heading span */
table td span {
display: block;
}
}
Как видим, способы сильно отличаются. И здесь важно понимать в контексте конкретного проекта, что использовать: молоток или отвертку.
Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.
