Как сделать блок с прокруткой (скролящийся) на смартфоне? Есть таблица, которая вмещается на компьютере,...

Рейтинг: 4 из 5, голосов 2
++++-
Как сделать блок с прокруткой (скролящийся) на смартфоне? Есть таблица, которая вмещается на компьютере, но слишком широкая для экрана телефона, нужно сделать, чтобы на маленьком экране у таблицы появлялся горизонтальный скролинг, а на большом экране он не отображался.
Ответ:

Для того, чтобы сделать горизонтальный скролинг, видимый только когда контент не вмещается на страницу (экран) по ширине, задайте 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
Оцените, насколько полезна эта страница
++++-
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.