День добрый! Сегодня я хочу поделиться как можно достаточно несложным способом сделать красивую адаптивную таблицу с помощью CSS.
Таблицы данных не очень хорошо справляются с адаптивным дизайном. К сожалению, этот момент есть. Отзывчивый дизайн — это все, что нужно для настройки дизайна для размещения экранов разных размеров. Итак, что происходит, когда экран уже, чем минимальная ширина таблицы данных? Вы можете уменьшить масштаб и увидеть всю таблицу, но размер текста будет слишком мал для чтения. Или вы можете приблизить точку считывания, но для просмотра таблицы потребуются горизонтальная прокрутка по вертикали и (печальная). Таблицы данных могут быть довольно широкими и обязательно такими. Таблицы можно выполнить гибкими по ширине (wight=100%), но содержимое ячеек может стать настолько узким, что его просто невозможно будет увидеть.
Для того, чтобы избежать этого неприятного момента используют адаптивные таблицы. В такой таблице будет отображаться горизонтальная полоса прокрутки, если экран слишком мал, чтобы отображать полный контент.
Как сделать адаптивную таблицу с помощью CSS
Чтобы создать отзывчивую таблицу, добавьте элемент контейнера overflow-x:auto вокруг <table>:
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Примечание. В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если установлено «overflow:scroll» или авто).
Источник: https://www.w3schools.com/howto/howto_css_table_responsive.asp