【bootstrap4】テーブルに関してまとめ
1)レスポンシブが上手く機能せず、予期せぬ部分で折り返しが発生する場合の対処方法
上記のサイトが参考になる。
上記のサイトでは、ヘッダータグ(th)に【class="text-nowrap"】を指定することで解決することが紹介されている。
ただし、上記の場合はヘッダーが折り返しされないだけで、ボディータグ(td)の要素(文字列)が長い場合、折り返しされてしまう。
そのような場合はtdタグに【class="text-nowrap"】を指定されることで折り返しされないようになる。
またbuttonタグなどが改行される場合は、buttonのクラスに【class="text-nowrap"】指定することで解決することが出来る。
2)テーブルのあれこれ
よく参考にするサイト。
上記のページに書かれている【常にレスポンシブ(Always responsive)】という見出しの部分が裏技が書かれていて参考になる。
「レスポンシブ表示をしなくてもいい状況だけど、表示項目が多すぎてPC画面で見るときも、レスポンシブ出来たらいいのに」という状況を解決できることが書いている。