Привет! Решил начать вести еще и Яндекс.Дзен. И начну его вести с самой популярной статьи в своем блоге - о создании адаптивной таблицы на css.
В наше время таблицы, слава богу, используются довольно редко. Но там, где в макете реально таблица - конечно нужно использовать ее. И сегодня я покажу, как именно сделать ее адаптивной на телефонах\маленьких планшетах. Хотя там вы сможете уже для себя подстроить как хотите данный метод.
Итак, для начала создаем разметку. Она вполне себе тривиальная (не переживайте если не очень хорошо ее видно - в конце статьи будет ссылка на codepen). Единственное, что бросается в глаза явно - это конечно наличие data-label. Они очень нужны для грамотной работы данного метода.
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Описание</th>
<th>Цена</th>
<th>Скидка</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Услуга">Мобильная верстка</td>
<td data-label="Описание">Верстка под телефоны</td>
<td data-label="Цена">$3000</td>
<td data-label="Скидка">50%</td>
</tr>
<tr>
<td data-label="Услуга">Посадка на CMS WordPress</td>
<td data-label="Описание">Создание сайта с админ. панелью</td>
<td data-label="Цена">$3000</td>
<td data-label="Скидка">30%</td>
</tr>
</tbody>
</table>
</div>
Разметку создали, теперь стоит обратиться к стилям. Сперва обычные стили:
body {
text-align: center;
padding-top: 10%;
font-family: sans-serif;
background-image: url('bg.jpg');
background-size: cover;
height: 100vh;
color: #fff;
}
.table-wrap {
text-align: center;
display: inline-block;
background-color: #fff;
padding: 2rem 2rem;
color: #000;
}
table {
border: 1px solid #ccc;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th, table td {
padding: 10px;
text-align: center;
border-right: 1px solid #ddd;
}
table th {
color: #fff;
background-color: #444;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
Это просто стили для таблицы, чтобы она смотрелась красивее. Вся магия будет дальше.
Но, кстати, если заказчика устраивает - есть еще вариант. Просто задать родителю таблицы overflow-x: scroll. Тогда по факту весь сайт будет нормально выглядеть, но в местах таблицы ее можно скроллить.
Однако наша магия будет круче:
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
border-right: 1px solid transparent;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
Полностью скрываем thead, и вместо него показываем как раз наши data-label (благо свойство content у псевдоэлементов это позволяет прекрасно).
Тем самым мы получим красивую таблицу на экранах шириной меньше 600 пикселей. Очень просто)
https://codepen.io/MaxGraph/pen/gyxqpB - тут есть живой пример, где можно все посмотреть.
https://blog.maxgraph.ru/2017/10/26/adaptivnaya-tablica-na-chistom-css/ - в моем блоге более детально описано все + есть тот вариант с overflow, о котором я говорил. Переходите и смотрите)
Надеюсь, статья была полезна, и успехов Вам в освоении этого метода!
https://blog.maxgraph.ru/ - подписывайтесь на блог и на канал в Яндекс.Дзен, чтобы не пропустить все самое интересное :)