Адаптивные таблицы: перенос данных в мобильном виде

🛠 Почему таблицы ломаются на мобильных?

Стандартные таблицы в HTML отлично работают на десктопах, но превращаются в кошмар на узких экранах. Представьте: 5 колонок на 320px шириной — данные наползают друг на друга, появляется горизонтальный скролл, UX умирает.

Проблемы классических таблиц:

Не влезают по ширине
Требуют прокрутки вбок
Текст переносится нечитаемо

🔄 3 подхода к адаптации таблиц

1. Горизонтальный скролл (просто, но не идеально)

<div class="table-container">
  <table>...</table>
</div>

.table-container {
  overflow-x: auto; /* Появится скролл при переполнении */
  -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
}

💡 Совет: Добавьте min-width для ячеек, чтобы сохранить читаемость.

2. Трансформация в карточки (mobile-first подход)

@media (max-width: 768px) {
  table, thead, tbody, tr, td {
    display: block;
  }

  td {
    padding: 0.5rem;
    border: none;
    position: relative;
    padding-left: 50%;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    font-weight: bold;
  }
}

Как это работает:

Таблица превращается в блоки
Заголовки колонок становятся псевдоэлементами
Данные выводятся вертикально

3. Динамическое отображение колонок (оптимизация контента)

function hideColumns() {
  if (window.innerWidth < 600) {
    document.querySelectorAll('.optional-column').forEach(col => {
      col.style.display = 'none';
    });
  }
}

Плюсы:

Убираем второстепенные данные
Сохраняем структуру таблицы

🌟 Продвинутый приём: CSS Grid + Flexbox

Комбинируем технологии для идеальной адаптации:

@media (max-width: 480px) {
  .responsive-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .table-cell {
    display: flex;
    flex-direction: column;
  }

  .table-header {
    font-size: 0.8em;
    color: #666;
  }
}

Эффект:

На мобильных — компактные карточки 2 в ряд
На десктопах — классическая таблица

📊 Сравнение подходов

Метод	Сложность	Поддержка браузерами	Гибкость
Горизонтальный скролл	★☆☆☆☆	100%	Низкая
Карточки	★★★☆☆	98%	Высокая
CSS Grid	★★★★☆	95%	Максимальная

🧪 Практический пример: таблица цен

<table class="price-table">
  <thead>
    <tr>
      <th>Тариф</th>
      <th data-label="Цена">$9.99</th>
      <th data-label="Лимиты">10GB</th>
    </tr>
  </thead>
</table>

.price-table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 600px) {
  .price-table td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 1rem;
  }
}

🚀 Фишки для продвинутых

1. Кастомный скроллбар:

.table-container::-webkit-scrollbar {
  height: 8px;
  background: #f1f1f1;
}

2. Анимация переключения:

td {
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  td:hover {
    transform: scale(1.02);
  }
}

💡 Главное правило

Адаптируйте не только вёрстку, но и контент. Иногда лучше упростить данные, чем сохранять сложную структуру. Как говорит Данила Бежин: «Лучшая адаптация — та, которую пользователь не замечает».