[解決済み] 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}
.
クレジット ジェイソン・ブラッドリー に感謝します。
関連
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み】モバイルレイアウトでBootstrap 3の列の順序を変更するにはどうすればいいですか?
-
[解決済み】Twitter Bootstrap 3でのIE8の問題
-
[解決済み] アドレスバーを非表示にすると背景画像が飛び出す iOS/Android/Mobile Chrome
-
[解決済み] BootstrapはCDNから使うべきか、それとも自分のサーバーにコピーを作るべきか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] bootstrapでpanel-bodyの背景色を変更するには?
-
[解決済み] Bootstrap 4.1のbd-highlightとは何ですか?
-
[解決済み】twitter bootstrap 2で送信ボタンにアイコンを追加する。
-
[解決済み] Twitter Bootstrap 3.0 どのように私は今 "バッジバッジ重要 "するのですか?
-
[解決済み】Twitter Bootstrapのポップオーバーを外側のクリックで解除する方法は?
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] Bootstrapがline-heightプロパティを1.428571429に設定する理由は何ですか?
-
[解決済み] bootstrapのtabindex="-1 "は何のためにあるのか?
-
[解決済み] Twitter Bootstrapの名前空間を利用してスタイルが衝突しないようにする方法
-
[解決済み] Bootstrap 4 のモーダルフッターボタンの左揃えと右揃え