Bootstrap5 / table がレスポンシブにならない場合の対処法

Bootstrap5 / table がレスポンシブにならない場合の対処法

先日、Bootstrap 5 でtable(表)がレスポンシブにならないという状況が起きました。

このブログのテンプレートは Bootstrap 5 で構成されているのですが、記事内でtable-responsiveを使っても効かない状況でした。

試行錯誤した結果、対処法がわかったので紹介します。

目次

table(表)がレスポンシブにならない?

Bootstrap 5 の table は、以下のようにtable-responsiveのクラスで table タグを囲むことでレスポンシブにできると公式ドキュメントには書かれています。

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

しかし当ブログではレスポンシブにならず、下のように画面幅に合わせて表の横幅が窮屈に縮小されてしまいました。

※ レスポンシブになると、表は縮小されずに横スクロールになります。

見出し1 見出し2 見出し3 見出し4 見出し5 見出し6
見出しA 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出しB 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

Bootstrap 5 の公式サイトでは確かにレスポンシブになっているのに、なぜでしょう。

どうやらブログ側の何らかの設定によっては<div class="table-responsive">が効かないように思われます。

いろいろと試したところ、以下2パターンの対処法がありそうです。

対処法1:text-nowrap のクラス名を追記して対処

解決策の1つとして、table タグにtext-nowrapのクラス名をつけることでレスポンシブになりました。

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

以下の表はレスポンシブ(横スクロール)になっていると思います。

見出し1 見出し2 見出し3 見出し4 見出し5 見出し6
見出しA 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出しB 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

text-nowrapのクラスを追加すると、以下の CSS が反映されます。

white-space: nowrap!important;

上記は「要素内で改行しない」という指定です。

この指定により表内の文字が改行されなくなり、レスポンシブになるようです。

ただ、この方法は簡単なのですが、table 全体の改行を禁止するので表のテキスト量によっては横スクロールがすごく長くなってしまう場合があります。

見出し1 見出し2 見出し3
見出しA 吾輩は猫である。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
見出しB 名前はまだ無い。 吾輩はここで始めて人間というものを見た。 この書生というのは時々我々を捕えて煮て食うという話である。

これだと表内の文字が読みにくく、ちょっと微妙です。

このように読みにくくなってしまう場合は、次の対処法を試してみてください。

対処法2:table クラスに幅を指定する

2つ目の解決策としては、CSS で table クラスの幅を指定することです。

たとえば、次のように .tablewidth を設定します。

@media (max-width:700px) {
  .table {
    width: 700px
  }
}

上記の場合、画面幅が 700px より大きい場合は横スクロールなし、700px 以下になったら table 幅 700px で横スクロールになります。

.tableにデフォルトで指定されている幅は 100% で、これだと横スクロールにならないようです。

指定する幅やブレイクポイントは、記事幅や表の内容によって調整してみてください。

表ごとに幅を変えたい場合は、style 属性を使って table タグの HTML 側で幅を指定しても良いと思いますが、メディアクエリは使えません。

下の表は、画面幅を 700px 以下まで狭めると横スクロールになります。

見出し1 見出し2 見出し3
見出しA 吾輩は猫である。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
見出しB 名前はまだ無い。 吾輩はここで始めて人間というものを見た。 この書生というのは時々我々を捕えて煮て食うという話である。

table の幅を設定するとテキスト量が多くても横スクロールが長くなりすぎることなく、見やすくなりますね。

ただ、左端と見出し1の列の幅が狭すぎて、少しバランスが悪く見えます。

列の幅を指定したい場合は、見出し行の列幅を % で指定することで調整できました。

<div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th scope="col" style="width:10%"></th>
      <th scope="col" style="width:20%">見出し1</th>
      <th scope="col" style="width:40%">見出し2</th>
      <th scope="col" style="width:30%">見出し3</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>
</div>
見出し1 見出し2 見出し3
見出しA 吾輩は猫である。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
見出しB 名前はまだ無い。 吾輩はここで始めて人間というものを見た。 この書生というのは時々我々を捕えて煮て食うという話である。

列幅は設定した方が見栄えは良いですね。

以上、2パターンの対処法を紹介しました。

表の内容・テキスト量によって、改行禁止の指定か table クラスの幅指定か、どちらの方法で対処するかを検討するのが良いかなと思います。

Bootstrap で table を使う際の参考になれば幸いです。

こちらの記事もよく読まれています
ブログを1カラムに変更した理由と、変更した結果(直帰率・平均ページ滞在時間)

ブログを1カラムに変更した理由と、変更した結果(直帰率・平均ページ滞在時間)

ブログのレイアウトを2カラムから1カラムに変更しました。この記事ではレイアウトの変更理由と、その結果直帰率がどうなったかなどを紹介したいと思います。

記事へのコメント・ご質問は こちら まで
NEXT PREV