Как сделать блок с прокруткой (скролящийся) на смартфоне? Есть таблица, которая вмещается на компьютере,...
16 мая 2019 г.
Как сделать блок с прокруткой (скролящийся) на смартфоне? Есть таблица, которая вмещается на компьютере, но слишком широкая для экрана телефона, нужно сделать, чтобы на маленьком экране у таблицы появлялся горизонтальный скролинг, а на большом экране он не отображался.
Ответ:
Для того, чтобы сделать горизонтальный скролинг, видимый только когда контент не вмещается на страницу (экран) по ширине, задайте CSS-свойство overflow-x: auto; блоку с контентом.
Пример блока с горизонтальной прокруткой
| Колонка-1 | Колонка-2 | Колонка-3 |
Код примера
<div style="width: 180px; overflow-x: auto;">
<table>
<tbody>
<tr>
<td>Колонка-1</td>
<td>Колонка-2</td>
<td>Колонка-3</td>
</tr>
</tbody>
</table>
</div>1
