Горизонтальный скролл в мобильной версии

Question

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

Answer 1

На самом деле уже есть в bootstrap такой класс table-responsive, который отвечает за это. Суть в том, что бы оборачиваете table в table-responsive

td {
  border: 1px solid black;
  display: table-cell;
}

table {
  display: table;
  width: 700px;
}

.table-responsive {
  max-width: 300px;
  overflow: auto;
  border: 1px solid black;
}

<div class="table-responsive">
  <table>
    <tr>
      <td>Таблица Таблица Таблица Таблица Таблица Таблица Таблица Таблица Таблица Таблица</td>
    </tr>
  </table>
</div>

БЛОГ НА HUSL

Горизонтальный скролл в мобильной версии

Ответы (1 шт):