Как реализовать адаптивную верстку таблицы с финансовыми данными на CSS, чтобы на мобилках она превращалась в список карточек?

Адаптивная верстка таблицы с финансовыми данными — одна из классических задач фронтенд-разработки. На десктопе таблица выглядит привычно, а на мобильных устройствах горизонтальный скролл неудобен. Решение — трансформировать строки таблицы в карточки с помощью CSS и data-атрибутов.

**Шаг 1: HTML-разметка**

Добавьте к каждой ячейке `

` атрибут `data-label` с названием колонки:

html

Дата	Операция	Сумма	Статус
01.06.2024	Оплата счёта	15 000 ₽	Выполнено

**Шаг 2: Базовые стили для десктопа**

css
.finance-table {
width: 100%;
border-collapse: collapse;
}
.finance-table th,
.finance-table td {
padding: 12px 16px;
border: 1px solid #e0e0e0;
text-align: left;
}
.finance-table thead {
background-color: #f5f7fa;
font-weight: bold;
}

**Шаг 3: Медиазапрос для мобильных устройств**

css
@media (max-width: 768px) {
.finance-table thead {
display: none; /* Скрываем заголовок */
}
.finance-table tr {
display: block;
margin-bottom: 16px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
padding: 8px;
}
.finance-table td {
display: flex;
justify-content: space-between;
align-items: center;
border: none;
border-bottom: 1px solid #f0f0f0;
padding: 10px 12px;
}
.finance-table td:last-child {
border-bottom: none;
}
.finance-table td::before {
content: attr(data-label);
font-weight: 600;
color: #555;
margin-right: 12px;
white-space: nowrap;
}
}

**Ключевые приёмы:**

— `display: block` для `

` превращает строку в блок-карточку.
— `display: none` для `

` убирает заголовок, так как метки теперь отображаются через псевдоэлемент `::before`.
— `content: attr(data-label)` — мощный CSS-трюк, который подставляет значение HTML-атрибута прямо в псевдоэлемент без JavaScript.
— `display: flex` с `justify-content: space-between` выравнивает метку слева, а значение справа — это удобно для финансовых данных.

**Дополнительные улучшения:**

— Добавьте цветовую индикацию статуса через классы (`.status-success`, `.status-pending`).
— Для колонки «Сумма» используйте `font-weight: bold` и цвет (зелёный для прихода, красный для расхода).
— Рассмотрите использование CSS-переменных для единообразия цветовой схемы.

Такой подход не требует JavaScript, работает во всех современных браузерах и обеспечивает отличный UX на мобильных устройствах.