Как адаптивно подогнать таблицу под экраны телефонов?
<div>
  <table></table>
</div>div { overflow-x: auto;}
Логика ясна и понятно, что должно происходить?
codepen.io/vitaliy_kirenkov/pen/xBFsb Типо такого...
Отзывчивость - изменение размеров под конкретное расширение, это горизонтальные ритмы в % и вертикальные в em'ах rem'ах, или любых других относительных шрифтовых размерностях.
Адаптивность - изменение позиционирования и формы каждого конкретного элемента с возможной заменой другими.
Есть display: table, display: table-cell, display: table-column, display: table-row их можно использовать для того что бы сделать из div'ов (или ещё чего-нить) табличку.
Количество колонок которое целесообразно отображать зависит от текущей ориентации дисплея.
Обычно для портретной ориентации это 2-3 колонки, а для альбомной 4-5.
На телефонах лучше всячески избегать табличек и откатываться к спискам.
На планшетах возможно построение таблички, но обычно просто сам список выводят в 2-3 колонки.
Адаптивность реализовывается посредством media queries.
Желательно использовать препроцессоры с миксинами для упрощения генерации под весь набор расширений.