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

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

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;

white-spaceは改行関係のプロパティで、nowrapは要素内で自動的に改行しないという指定です。

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

ただ、この方法は簡単なのですが、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 の幅指定か、どちらの方法で対処するかを検討するのが良いかなと思います。

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

こちらの記事もよく読まれています
ブログに画像を載せるときに知っておきたいこと

ブログに画像を載せるときに知っておきたいこと

今回は、画像をブログに載せるときの注意点を紹介します。 画像を適切に載せることでページ表示速度の向上が見込めますし、SEO 効果も期待できます。

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