1. ホーム
  2. twitter-bootstrap

[解決済み] Bootstrapを使ってモバイルでテーブルを表示するには?

2023-03-18 23:06:01

質問

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

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

どのように解決するのですか?

Bootstrap 3を導入しました。 レスポンシブテーブル :

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

Bootstrap 4も同様ですが、いくつかの 新しいクラス :

...すべてのビューポートでレスポンシブである ... with .table-responsive . または、レスポンシブなテーブルを持つ最大のブレークポイントを選択するために .table-responsive{-sm|-md|-lg|-xl} .

クレジット ジェイソン・ブラッドリー に感謝します。