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

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

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

twitter-bootstrap twitter-bootstrap-3

— ガンダー
ソース

Bootstrap 3.0が「モバイルファースト」になることに気づきました。誰かがモバイルテーブルのこの「問題」を解決すると思いますか？

Bootstrap 3でもテーブルは同じように見えます。:(

— Giles Roberts

@GilesRoberts 「Bootstrap 3で同じ」とは、「Bootstrap 3で応答するようになった」ことを意味し、そうであれば、それらは同じです。

— ta.speot.is 2013年

@ ta.speot.isリリース候補よりも優れています。そこにあるすべての例は4列しかありません。それでも幅の広いテーブルではうまく機能しません。私は最終的に固定された最初の列と残りのすべてのスクロールでソリューションを使用することになりました。

— Giles Roberts

@ ta.speot.is以下の答えを見ただけです。Bootstrap 3にテーブルレスポンシブクラスがあることを逃しました。特定の列を常に表示する必要がない場合は、適切に機能します。

— Giles Roberts

回答:

122

Bootstrap 3ではレスポンシブテーブルが導入されています。

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

ブートストラップ4も似ていますが、いくつかの新しいクラスを介してより多くの制御が可能です。

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

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

レスポンシブテーブル

— ta.speot.is
ソース

ありがとうございました。人々の99.9％のように、私は更新のドキュメントを読むことを気にしませんでした。私が持っているべきだと思います。

— DavidBélanger2013年

確かにそうです！さらに、それは私が最初にやりたかったことをしているので、私にとっては2 in 1です！

— DavidBélanger2013年

table-responsiveクラスは正確には何をしますか？Bootstrapのドキュメントでは「横方向にスクロールさせる」とありますが、スクロールに関連する違いはわかりません。私が気づく唯一の違いは、特定の画面サイズの下では（例に示すように）テーブルの外側に境界線が表示されることです。

— Dennis

@ ta.speot.isドキュメントを誤って読み、クラスを誤って使用していることに気付きました。.table-responsiveテーブル<table class="table table-responsive">をでラップするのではなく、テーブル自体に追加していました（例）.table-responsive。

— デニス

@PirateApp使用hidden-*上のtdあなたが非表示にする列のS getbootstrap.com/docs/3.3/css/#responsive-utilitiesは

— ta.speot.is

より大きなテーブルは、たとえ機能しても、モバイルでは完全にフレンドリーではないため、次のいずれかの方法を試すことも検討してください。

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

私は「No More Tables」に部分的ですが、それは明らかにあなたのアプリケーションに依存します。

— 和音
ソース

素晴らしいリンクと3つの本当に素晴らしいソリューション！私はあなたの答えに賛成するためだけにこの質問に戻る方法をググる必要がありました。ありがとう！

— Simon

リンクのみで構成される回答は、スタックオーバーフローのエチケットが不適切です。ページが失われたり、ページのコンテンツが変更されたり、回答がすぐに表示されなかったり、回答を改善できなかったりする可能性があります。ところで、リンクはもはや正しいコンテンツを指していません。

— Dennis

同意しましたが、現時点では、web.archive.org

— web

@デニスは正しいです。リンクの内容を要約するために回答を詳しく説明し、デモや詳細のためにリンクも保持してください。それでもリンクが非常に興味深いので、あなたは私の賛成票を獲得します。乾杯。

— Mario Awad 2015

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

Twitterブートストラップテーブルの幅が常に100％になるのはなぜですか？

— マット・ブッシュ
ソース