3

Не работает скролл на мобильных устройствах для широкой таблицы, она не скролится.

Если смотреть через консоль веб-разработчика на маленьких экранах, то скролл появляется.

table {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
<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>

3 ответа 3

1

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

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

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

} 
1
  • к сожалению, никакого результата 28 июл 2020 в 15:19
0

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

0

Нужно таблице задать минимальную ширину и обернуть блоком 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;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.