Bootstrapでテーブルを横スクロールさせる方法を解説！
この記事では、Bootstrapのテーブルで横スクロールさせる方法を解説していきます。.table-responsiveを適用することで簡単にテーブルを横スクロールすることが出来るようになりますが、背景が重なってしまう対処法も解説致します。
Bootstrapで簡単にテーブルを横スクロール出来るようになりたい！
Bootstrapでは、.table-responsiveを適用することでテーブルを横スクロールすることが出来るようになります。
Bootstrapで簡単にテーブルを横スクロール出来る方法をサンプルコード付きで紹介します。
Bootstrapでテーブルを横スクロールさせる方法
横スクロール
.table-responsive
Bootstrapで、横スクロールをしたいには.teble-responsiveを使います。画面の幅が狭くなると横スクロールすることが出来るクラスです。
横長の表を記載したい場合に.table-responsiveを使うと簡単にスマートフォンや、パソコンで見ることが出来ます。
使い方としては簡単で、.tableタグを.table-responsiveで囲むと出来ます。
下記のサンプルコードをみて下さい。
しかしこの場合だと左端が見えなくなってしまいます。
この対処法を次章で解説致します。
左端を固定して横スクロール
position: sticky;
横スクロールをした際に一番左端を固定したい場合には、position: sticky;をcssに指定すると固定されたまま横スクロールすることが出来ます。
今回は左端をのヘッダーを固定したいのでleft: 0;を指定するようにして下さい。
また、top: 0;を指定すると一番上だけ固定されるようになります。
上記のサンプルコードで横スクロールをすると固定したテーブルに背景が重なってしまう現象が起きてしまいます。
これを解消するため、background-color: white;を適用すると下記のサンプルコードのように固定されたテーブルに重なっても背景が透けることなく横スクロールすることが出来るようになりました。
まとめ
いかがだったでしょうか？
テーブルを横スクロールしたい際には.tableタグを.table-responsiveで囲みleft: 0;(top: 0;)をcssで指定します。
またposition: sticky;をcssで指定し、background-color: white;を適用することで背景と重なった際に後ろが透けることなくテーブルを横スクロールすることが出来るようになります！
