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>Responsive tables | Tables (テーブル) · Bootstrap v5.0
しかし当ブログではレスポンシブにならず、下のように画面幅に合わせて表の横幅が窮屈に縮小されてしまいました。
※ レスポンシブになると、表は縮小されずに横スクロールになります。
| 見出し１ | 見出し２ | 見出し３ | 見出し４ | 見出し５ | 見出し６ | |
|---|---|---|---|---|---|---|
| 見出しA | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
| 見出しB | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
Bootstrap 5 の公式サイトでは確かにレスポンシブになっているのに、なぜでしょう。
どうやらブログ側の何らかの設定によっては<div class="table-responsive">が効かないように思われます。
いろいろと試したところ、以下２パターンの対処法がありそうです。
対処法１：text-nowrap のクラス名を追記して対処
解決策の１つとして、table タグにtext-nowrapのクラス名をつけることでレスポンシブになりました。
<div class="table-responsive">
<table class="table text-nowrap">
...
</table>
</div>以下の表はレスポンシブ（横スクロール）になっていると思います。
| 見出し１ | 見出し２ | 見出し３ | 見出し４ | 見出し５ | 見出し６ | |
|---|---|---|---|---|---|---|
| 見出しA | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
| 見出しB | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） | 内容（コンテンツ） |
text-nowrapのクラスを追加すると、以下の CSS が反映されます。
white-space: nowrap!important;上記は「要素内で改行しない」という指定です。
white-space - CSS: カスケーディングスタイルシート | MDN
この指定により表内の文字が改行されなくなり、レスポンシブになるようです。
ただ、この方法は簡単なのですが、table 全体の改行を禁止するので表のテキスト量によっては横スクロールがすごく長くなってしまう場合があります。
| 見出し１ | 見出し２ | 見出し３ | |
|---|---|---|---|
| 見出しA | 吾輩は猫である。 | どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 | しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。 |
| 見出しB | 名前はまだ無い。 | 吾輩はここで始めて人間というものを見た。 | この書生というのは時々我々を捕えて煮て食うという話である。 |
これだと表内の文字が読みにくく、ちょっと微妙です。
このように読みにくくなってしまう場合は、次の対処法を試してみてください。
対処法２：table クラスに幅を指定する
２つ目の解決策としては、CSS で table クラスの幅を指定することです。
たとえば、次のように .table に width を設定します。
@media (max-width:700px) {
.table {
width: 700px
}
}上記の場合、画面幅が 700px より大きい場合は横スクロールなし、700px 以下になったら table 幅 700px で横スクロールになります。
.tableにデフォルトで指定されている幅は 100% で、これだと横スクロールにならないようです。
指定する幅やブレイクポイントは、記事幅や表の内容によって調整してみてください。
表ごとに幅を変えたい場合は、style 属性を使って table タグの HTML 側で幅を指定しても良いと思いますが、メディアクエリは使えません。
下の表は、画面幅を 700px 以下まで狭めると横スクロールになります。
| 見出し１ | 見出し２ | 見出し３ | |
|---|---|---|---|
| 見出しA | 吾輩は猫である。 | どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 | しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。 |
| 見出しB | 名前はまだ無い。 | 吾輩はここで始めて人間というものを見た。 | この書生というのは時々我々を捕えて煮て食うという話である。 |
table の幅を設定するとテキスト量が多くても横スクロールが長くなりすぎることなく、見やすくなりますね。
ただ、左端と見出し１の列の幅が狭すぎて、少しバランスが悪く見えます。
列の幅を指定したい場合は、見出し行の列幅を % で指定することで調整できました。
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col" style="width:10%"></th>
<th scope="col" style="width:20%">見出し１</th>
<th scope="col" style="width:40%">見出し２</th>
<th scope="col" style="width:30%">見出し３</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>| 見出し１ | 見出し２ | 見出し３ | |
|---|---|---|---|
| 見出しA | 吾輩は猫である。 | どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 | しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。 |
| 見出しB | 名前はまだ無い。 | 吾輩はここで始めて人間というものを見た。 | この書生というのは時々我々を捕えて煮て食うという話である。 |
列幅は設定した方が見栄えは良いですね。
以上、２パターンの対処法を紹介しました。
表の内容・テキスト量によって、改行禁止の指定か table クラスの幅指定か、どちらの方法で対処するかを検討するのが良いかなと思います。
Bootstrap で table を使う際の参考になれば幸いです。