Почему у таблицы будут проблемы при адаптивности

Таблицы сложно адаптировать из-за их жесткой структуры. На узких экранах горизонтальный скролл неудобен, а перенос строк ухудшает читаемость. Основные проблемы:

1. Фиксированная ширина - колонки не сжимаются пропорционально
2. Много контента - данные не помещаются в viewport
3. Семантическая связь - при респонсивных преобразованиях теряется связь между заголовками и данными

Решение - медиазапросы, скрытие неважных колонок или перестройка в карточки:

@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  td {
    position: relative;
    padding-left: 50%;
  }
  td:before {
    position: absolute;
    left: 6px;
    content: attr(data-label);
    font-weight: bold;
  }
}

Альтернатива - библиотеки вроде react-table с адаптивными режимами.