Это то, что у меня есть:
<div class="table-responsive">
<table class="table" style="background: transparent">
....
</table>
</div>
Я использую следующий файл bootstrap.css: http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css
Когда я пытаюсь прокручивать вверх и вниз на устройстве iOS (пока мой палец касается таблицы), он не прокручивается. Он просто тянет всю страницу вверх и вниз. Мне нужно коснуться фона тела или любого другого объекта, кроме таблицы, для прокрутки. Эта проблема не возникает на устройствах Android, но, похоже, она присутствует на устройствах iOS, таких как iPhone.
Я попытался добавить overflow-y: auto в <div class="table-responsive">, но он все еще не работал.
Что мне нужно добавить, чтобы включить прокрутку на мобильных устройствах (устройства Apple, в частности)?
Для всех, у кого есть эта проблема, все, что я должен был сделать, чтобы решить проблему, заключалось в том, чтобы добавить следующую строку в класс класса table-responsive:
-webkit-overflow-scrolling: touch;
И теперь он работает так, как ожидалось.
У меня была такая же проблема, после чего я удалил overflow: hidden; из html и body.
Поведение Safari в IOS соответствовало поведению Chrome на Android, т.е. Страница снова прокручивалась по вертикали. Проверьте и посмотрите, имеет ли родительский элемент .table-responseive overflow-hidden и попробуйте прокомментировать его.
Я все еще ищу лучшее решение, которое не заставит меня изменить CSS родительских элементов.
[EDIT]
Нашел. Вам не нужно изменять значение переполнения родительского элемента .table-responsive, просто убедитесь, что вы добавили
parent {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Это позволяет делать таблицы только горизонтально. Вертикальная прокрутка с таблицами не является исключением из бутстрапа Twitter.
Ознакомьтесь с их документацией для получения дополнительной информации: Ревизионные таблицы под вкладкой CSS
Источник: http://getbootstrap.com/css/#tables