Как сделать горизонтальную прокрутку таблицы на сайте

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

Настройка
Для того, чтобы у таблицы появилась горизонтальная прокрутка, ей нужно задать фиксированную ширину и поместить внутри родительского блока, у которого ширина будет изменяться.

Создаем родительский блок с классом table-wrap, задаем ему максимальную ширину равную ширине таблицы, простую ширину делаем 100%, атрибут overflow ставим в auto.
Затем внутри него создаем таблицу с классом table и фиксированной шириной.

<div class="table-wrap"> 
  <table class="table"> 
    <tbody> 
      <tr> 
        <th>Вид услуги</th> 
        <th>Ед. изм.</th> 
        <th>Цена (руб.)</th> 
        <th>Кол-во посещений</th> 
      </tr> 
      <tr> 
        <td>Консультация психолога</td> 
        <td>Посещение</td> 
        <td>от 2000 руб.</td> 
        <td>1</td> 
      </tr> 
      <tr> 
        <td>Консультация гастроэнтеролога</td> 
        <td>Посещение</td> 
        <td>от 5000 руб.</td> 
        <td>1</td> 
      </tr>      
    </tbody> 
  </table> 
</div> 

.table-wrap {
  max-width: 800px;
  width: 100%;
  overflow: auto;
}
.table {
  width: 1000px;
}

Пример:

При ширине страницы 1000px и более прокрутки видно не будет, при уменьшении размера страницы по ширине, у таблицы появится горизонтальная прокрутка.
Настройка внешнего вида таблицы создается с помощью дополнительных стилей.
Как видите все просто, используйте этот способ в своих работах и создавайте качественный контент.