【Bootstrap4】画面幅に応じてテーブルの特定列の表示・非表示をレスポンシブに切り替える

  • このエントリーをはてなブックマークに追加

テーブル(表)を利用すると、データを見やすく表示することができますが、画面幅の狭いスマホだと横長のテーブルは見にくくなってしまいます。そこで、レスポンシブで特定列の表示・非表示を切り替えることができれば、スマホサイズでも見やすいテーブルに変更することができます。今回は、Bootstrapでテーブルを作成し、レスポンシブで特定列の表示・非表示を切り替える方法をサンプルコードを提示しながら説明します。

  1. Bootstrapでテーブル作成
  2. Bootstrapのdisplayクラスを利用して特定列を非表示にする
  3. 画面幅に応じて表示・非表示をレスポンシブに切り替え

 1. Bootstrapでテーブル作成

Bootstrapのtableクラスを使用すると、基本的なテーブルスタイルを適用することができます。tableクラスが適用されているBootstrapテーブルは、オプションでヘッダーの色を変更したり、行のホバー状態を有効にすることができます。

●View

社員Id・社員名・所属部署・勤続年数・役職・備考を表示するテーブルを作成しました。

 2. Bootstrapのdisplayクラスを利用して特定列を非表示にする

作成したテーブルをスマホで確認すると下記のようになり、列幅が狭くなってしまい見にくくなってしまいます。

Bootstrapのdisplayクラスを利用して、「勤続年数」と「備考」の列を非表示にします。thとtdに「d-none」クラスを指定すれば特定列を非表示にすることができます。

●View

画面幅に関わらず「勤続年数」と「備考」の列が非表示になるように変更しました。

 3. 画面幅に応じて表示・非表示をレスポンシブに切り替え

Bootstrapのdisplayクラスを利用し、画面幅に応じて表示・非表示をレスポンシブに切り替えることができます。

.d-{ブレークポイント(sm/md/lg/xl)}-none


画面幅がブレークポイント以上の場合に非表示(display: none)

ブレークポイント Class ビューポートサイズ
指定なし .d-none 0px以上(全て非表示)
sm .d-sm-none 567px以上で非表示
md .d-md-none 768px以上で非表示
lg .d-lg-none 992px以上で非表示
xl .d-xl-none 1200px以上で非表示

.d-{ブレイクポイント(sm/md/lg/xl)}-block


画面幅がブレイクポイント以上の場合に表示(display: block)

ブレークポイント Class ビューポートサイズ
指定なし .d-block 0px以上(全て表示)
sm .d-sm-block 567px以上で表示
md .d-md-block 768px以上で表示
lg .d-lg-block 992px以上で表示
xl .d-xl-block 1200px以上で表示

例えば、SMサイズ(567px以下)のみ非表示にしたい場合、クラスに「d-none(全て非表示) d-sm-block(SMサイズ以上は表示)」と指定します。

.d-{ブレイクポイント(sm/md/lg/xl)}-table-cell


画面幅がブレイクポイント以上の場合にテーブルセル(th, td)を表示(display: table-cell)

ブレークポイント Class ビューポートサイズ
指定なし .d-table-cell 0px以上(全てテーブルセル表示)
sm .d-sm-table-cell 567px以上でテーブルセル表示
md .d-md-table-cell 768px以上でテーブルセル表示
lg .d-lg-table-cell 992px以上でテーブルセル表示
xl .d-xl-table-cell 1200px以上でテーブルセル表示

※今回はテーブルの特定列の表示・非表示を切り替えるため、.d-noneと.d-table-cellを利用します。

●View

画面幅によって特定列の表示・非表示を切り替えるレスポンシブなテーブルを簡単に作成することができました。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*