Bootstrapでテーブルを横スクロールさせる方法を解説!

この記事では、Bootstrapのテーブルで横スクロールさせる方法を解説していきます。.table-responsiveを適用することで簡単にテーブルを横スクロールすることが出来るようになりますが、背景が重なってしまう対処法も解説致します。

コンテンツ [表示]

  1. 1Bootstrapで簡単にテーブルを横スクロール出来るようになりたい!
  2. 2Bootstrapでテーブルを横スクロールさせる方法
  3. 2.1横スクロール
  4. 2.2左端を固定して横スクロール
  5. 3まとめ

Bootstrapで簡単にテーブルを横スクロール出来るようになりたい!

Bootstrapでは、.table-responsiveを適用することでテーブルを横スクロールすることが出来るようになります。

Bootstrapで簡単にテーブルを横スクロール出来る方法をサンプルコード付きで紹介します。

Photo byPexels

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;を適用することで背景と重なった際に後ろが透けることなくテーブルを横スクロールすることが出来るようになります!

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

shu
ライター

shu

主にHTML & CSS、Bootstrap の記事を執筆します。皆さんがわかりやすく、記憶に残る情報を発信していきます。