Собираем различные механизмы изменения стилей для мобильной версии.
Изменение направления таблицы
Если у нас есть таблица, например, с перечислением отделов и в моб. версии она не помещается, то мы можем пересобрать её в колонки.
Закупки | +7 (999) 888-77-66 | buyers@site.ru |
Продажи | +7 (999) 888-77-66 | sales@site.ru |
Логистика | +7 (999) 888-77-66 | logistics@site.ru |
Бухгалтерия | +7 (999) 888-77-66 | buh@site.ru |
Назначим таблице класс contacts и пропишем стили для моб. версии.
@media (max-width: 768px) {
table.contacts tbody {display: flex; flex-direction: column; gap: 20px;}
table.contacts tr {display: flex; flex-direction: column;}
table.contacts tr td:first-child {font-weight: 600;}
table.contacts tr td:not(:last-child) {border-bottom: 0 !important;}
}
Таблица примет следующий вид:
Закупки | +7 (999) 888-77-66 | buyers@site.ru |
Продажи | +7 (999) 888-77-66 | sales@site.ru |
Логистика | +7 (999) 888-77-66 | logistics@site.ru |
Бухгалтерия | +7 (999) 888-77-66 | buh@site.ru |