Несколько способов создания адаптивных таблиц на чистом CSS:

1. Перенос текста на следующую строку. 1 Этот способ работает лучше всего для относительно небольших таблиц с минимальным содержанием. 1 Нужно добавить свойство word-break для таблицы: table { word-break: break-all; }. 1
2. Горизонтальная прокрутка. 14 Особенно полезна для таблиц с множеством столбцов. 1 Нужно обернуть таблицу в контейнер и установить свойство overflow на auto. 1 Это позволит контейнеру прокручивать содержимое, если оно не поместится внутри. 1
3. Использование медиазапросов. 2 Медиазапрос переключает макет таблицы на вертикальное отображение, когда экран становится уже 600 пикселей. 2 Содержимому каждой ячейки для наглядности предшествует метка данных. 2 Такой подход обеспечивает читаемость и доступность на небольших экранах за счёт вертикального расположения ячеек таблицы. 2
4. Горизонтальный скролл. 4 Это решение подходит при выводе в таблицу больших объёмов данных. 4 Нужно установить фиксированное значение для свойства min-width элемента table. 4 Для просмотра данных на мобильном устройстве пользователю придётся делать горизонтальный скролл. 4