web-dev-qa-db-ja.com

Bootstrapを使用してモバイルでテーブルを表示する方法は？

テーブルはデスクトップで正常に表示されますが、モバイルバージョンを表示しようとすると、テーブルがモバイルデバイスの画面に対して広すぎてしまいます。レスポンシブレイアウトを使用しています。

モバイルビューのテーブル幅を設定するにはどうすればよいですか？ Bootstrapを使用してモバイルビューで表形式のデータを表示する他の方法はありますか？

twitter-bootstraptwitter-bootstrap-3
81
user810606

ブートストラップ3では、 レスポンシブテーブル が導入されています。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ブートストラップ4は似ていますが、いくつかの 新しいクラス を介してより制御します：

...すべてのビューポートで応答します... .table-responsiveで。または、.table-responsive{-sm|-md|-lg|-xl}を使用して、レスポンシブテーブルを作成する最大ブレークポイントを選択します。

例を提供してくれた Jason Bradley の功績：

Responsive Tables

112
ta.speot.is

より大きなテーブルは、たとえ動作してもモバイル上で正確に友好的ではないため、これらのアプローチのいずれかを試すことを検討することもできます。

http://elvery.net/demo/responsive-tables/

「No More Tables」には賛成しませんが、それは明らかにアプリケーションに依存します。

62
Chords

bootstrap内のすべてのテーブルは、それらが入っているコンテナに従って伸縮します。テーブルを.span要素内に配置して、サイズを制御できます。このSO質問はあなたを助けるかもしれません

なぜTwitter Bootstrapテーブルの幅は常に100％なのですか？

4
Matt Busche