【CSS】tableの表を滑らかに横スクロールさせる方法

tableタグで作った表の横幅が項目が多すぎてスマホ表示の時に画面に収まりきらない時は、横にスクロールさせるようにすれば表や項目が潰れずに表示することが可能です。

今回はスマホ表示時にtableで作った表を横にスクロールさせるCSSの実装方法について紹介します。

ユーザビリティ的にも良心的な表示方法なので、項目量が多い表を作る場合に便利なレイアウト方法です。

現象

画像のように横に項目数が多い表をコーディングした時に、PC表示の時は問題ないと思いますがレスポンシブでスマホ表示になった時などは、項目が画面に収まりきらず1つ1つの項目の幅が狭くなってしまい非常に見づらい状態になってしまいます。

これではせっかく綺麗にまとめた表も何がなんだか分からなくなってしまいます。

この見づらい表を見やすくする方法は、ページ全体を横にスクロールするのではなく、tableで組んだ表のみ横にスクロールさせます。

デモをご覧ください。

左が実際に記述したHTMLとCSSのコードで、右がコードをプレビューした画面になります。

コードビューの表の下のスクロールバーを右に動かすと表の部分のみ横にスクールします。

CSSの記述方法は簡単です。

まずはtableタグ内の項目が画面幅によって折り返さないようにthとtdタグにwhite-space: nowrap;と指定します。

th,td {
  white-space: nowrap;
}

次にtableタグを囲ったdivタグに下記のCSSを指定すれば完成です。

.tableLayout {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

CSSの解説をします。

はじめにthとtd要素は初期状態の場合は画面の幅に応じて改行されてしまいます。

スマホ画面のような表示領域が狭いデバイスだとthとtdで囲った要素が自動的に改行されてしまい、1つ1つの領域が狭くなってしまいます。

それをwhite-space: nowrap;を指定することによって画面領域の制限による文字の改行を防ぐことができます。

次にwidth:100%;でtableの内容を横幅いっぱいに表示させるようにします。

先程white-space: nowrap;で指定したthとtd要素は改行されなくなったので、表示領域からはみ出て表示されてしまいます。

そこにoverflow:hidden;を指定すれば、はみ出た要素にスクロールバーが表示されるようになります。

最後の仕上げにoverflow-scrolling: touch;を指定するとスマートフォンなどの端末で指でスクロールすると、滑らかなスクロールを表現することができます。

これを指定しないとスマホ特有の滑らかなスクロールが実現しないので忘れずに指定しておきましょう。

また念の為にベンダープレフィックス（-webkit-）を一緒につけて指定してください。