Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

スマホ表示でtableの表を滑らかに横スクロールさせるCSSの記述方法

スマホ表示でtableの表を滑らかに横スクロールさせるCSSの記述方法

画像出典:W3C

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

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

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

 

目次

現象

PCとスマホのtable表のレイアウト

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

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

解決方法は表を横スクロールさせる

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

デモをご覧ください。

See the Pen スマホ表示時にtableタグの内容を横スクロールする方法 by tak-kun (@tak-kun) on CodePen.

左が実際に記述したHTMLとCSSのコードで、右がコードをプレビューした画面になります。コードビューの表の下のスクロールバーを右に動かすと、表の部分のみ横にスクールします。

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の解説

記述したCSSの解説をします。

white-space: nowrap;でthとtdを改行をさせない

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

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

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

overflow:hidden;ではみ出た要素にスクロールバーを表示させる

次にwidth:100%;でtableの内容を横幅いっぱいに表示させるようにします。先程white-space: nowrap;で指定したthとtd要素は改行されなくなったので、表示領域からはみ出て表示されてしまいます。そこにoverflow:hidden;を指定すれば、はみ出た要素にスクロールバーが表示されるようになります。

overflow-scrolling: touch;

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

これを指定しないとスマホ特有の滑らかなスクロールが実現しないので、忘れずに指定しておきましょう。また念の為にベンダープレフィックス(-webkit-)を一緒につけて指定してください。