web-dev-qa-db-ja.com

Bootstrap iOSデバイスでレスポンシブテーブルが水平方向にスクロールしない

次のマークアップを含むテーブルがあります。

<div class="table-responsive"
    <table class="table table-hover"
        <!-- table data-->
    </table>
</div>

ドキュメントが言うように、私のテーブルは今や水平にスクロールできるはずです。 Chromeのデバイスエミュレータを使用すれば機能します。ただし、実際のiPhone（この場合はiPhone 5s-iPhone 6でもテスト済み）を使用して試してみると、テーブルを水平方向にスクロールできません。デフォルトでビューポートに表示されている最後の列を確認できますが、横にスクロールすることはできません。私はそれをchromeと私のiPhoneのサファリで試してみましたが、同じ動作が得られました。

私がやろうとしたことは、-webkit-overflow-scroll: touchを追加することですが、問題は解決しませんでした。また、デフォルトのautoの代わりにoverflow-x: scrollを手動で追加しようとしましたが、使用できません。

私はそれが重要かどうかはわかりませんが、bootstrap plugin-offcanvas-by jasny bootstrap も持っているので、iPhoneでそのサイドメニューを垂直にスクロールできません。 -それはすべてエミュレータで動作しますが、実際には失敗します。

たぶん、これらの2つは何らかの形で接続されています。

どんな助けでもありがたいです。

編集：

Android=電話でテストしたところ、期待どおりにテーブルを水平にスクロールできるようです。しかし、Androidでもサイドメニューを垂直にスクロールすることはできません。これらの問題は互いに関連していません。

csstwitter-bootstraptwitter-bootstrap-3responsive-designjasny-bootstrap
15
kfirba

デフォルトで、.table要素にはmax-width: 100%があり、サファリはこれを「尊重」しているため、幅を100％に設定しています。これは、.table要素が.table-responsive要素をオーバーフローしていないため、スクロールできないことを意味します。これはどういうわけかAndroid電話には影響しません。

修正はかなり簡単でした：

.table-responsive .table {
    max-width: none;
}
18
kfirba
.table-responsive .table {
    max-width: none;
    -webkit-overflow-scrolling: touch !important;
}
10
Rana Nematollahi