Многие задаются вопросом: "Как адаптировать таблицу под мобильные устройства?". при это хочется чтоб читабельность не исчезла и заморачиваться не хочется.

Я предлагаю простой и самый легкий на мой взгляд вариант. Пример реализации можно посмотреть тут "Демо"

В стиль CSS нужно дописать стиль блока

.table-container {width: 100%;overflow: auto; -webkit-overflow-scrolling: touch;}

Сама таблица , будет находится в контейнере div с нашим созданным классом.

<div class="table-container">
   /* тут и надо вставить нашу таблицу  */
</div>

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

оптимизация таблиц CSS