Отобразить горизонтальный скролл на мобильных устройствах

Question

Не работает скролл на мобильных устройствах широкой таблицы. При этом не скролится. Если смотреть через консоль веб-разработчика на маленьких экранах, то скрол появляется.

<table>
    <tr>
        <th> Название</th>
        <th> Название</th>
        <th> Название</th>
        <th> Название</th>
        <th> Название</th>
    </tr>
    <tr>
        <td>item</td>
        <td>item</td>
        <td>item</td>
        <td>item</td>
        <td>item</td>
    </tr>
</table>

<style>
    table {
        overflow-x: scroll; 
        -webkit-overflow-scrolling: touch;

    }
</style>

Answer 1

Убедитесь что для body заданы настройки ширины и отсутствует ограничение на overflow:

body {
   width: 100%;
   overflow: visible; // значение по умолчанию
}

table {
    width: 80vw; // замените на требуемое значение
    overflow-x: scroll;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;

}

Answer 2

Мой вариант далеко не самый правильный,вероятнее всего, но я таким образом разочек решил похожую проблемку) Просто укажи таблице на мобильных экранах display: block; =)

Answer 3

Нужно таблице задать минимальную ширину и обернуть блоком div с overflow-x: scroll;

<div class="scroll_box">
    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

.scroll_box {
    overflow-x: scroll;
}

.scroll_box table {
    min-width: 800px;
}

БЛОГ НА HUSL

Отобразить горизонтальный скролл на мобильных устройствах

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