tableを横スクロールで表示する方法。
CSSの実際のコード解説と使用時の注意点なども

サイトの性質などによっては、テーブルを多用するサイトなどを作る機会があります。昔のようにPCだけの閲覧を考えている時代であれば問題ないのですが、最近ではスマホで閲覧される事の方が多くなっている時代です。

そうなると、テーブルで縦ではなく横に長い表を表示した場合、PCでは綺麗に表示できるかもしれませんが、スマホのように縦長の画面で見ようとした場合、ぎゅっと凝縮された見づらい表になってしまうため、tableを使って表示するのを躊躇うというケースがあるかもしれません。

そんな時に役立つのが、今回紹介する横に長くなったテーブルを横スクロールさせる方法です。これを使えば、縦長のスマホ画面でも横スクロールで見やすく整理できるようになります。

実際の事例や使い方などと、ちょっとした注意点なども合わせてまとめていますので参考にしてみてください。

普通のtableだとスマホは3列くらいが限界

まずはそもそも論にはなりますが、tableタグを通常通り書いていったりすると、cssでの余白の設定や各セルの中にどれくらい長い文章を入れるかでも変わってはしましますが、だいたい多くの場合は2列～3列くらいまでがスマホで見られる限界かなと思います。

実際、下記は3行×3列のテーブルをコードを直接書いてスマホだとそのまま縮小されるだけになっているので確認するとわかりますが、これくらいのテーブルであれば問題なく見る事ができます。

逆に3行×3列でも、セルの中にテキストが多く入るようなテーブルの場合は、3列なだけでもスマホの画面だと閲覧は少ししんどくなってしまいます。

こういったテーブルをそのままサイズして縮小すると見づらいため、横スクロールで表示してスマホでも見やすくしようというものです。

横スクロールする方法とそのコード

では実際に横スクロール方法を見ていきましょう。
基本はCSSのみで設定することができますし、意外と簡単に行う事が可能です。

HTMLのコード

HTMLはそのまま普通にテーブルのコードを書くだけです。
1点注意点としては、tableを囲う枠が必要になるという点で、今回は.table-scrollというクラス名で囲っています。

<div class="table-scroll">
  <table>
    <tr>
      <th>THの見出し</th>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
    </tr>
    <tr>
      <th>THの見出し</th>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
    </tr>
    <tr>
      <th>THの見出し</th>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
    </tr>
  </table>
</div>

今回はスクロールした方が見やすくわかりやすいという事のため、3行×5列のテーブルにしています。

CSSのコード

では実際の大事なCSSのコードです。

.table-scroll {
  overflow-x: auto;
}

.table-scroll table{
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

.table-scroll th{
  width: 250px;
  padding: 15px;
  border: 1px solid #999;
  background-color: #eee;
}

.table-scroll td {
  width: 250px;
  padding: 15px;
  border: 1px solid #999;
}

大切なポイントとしては、tableを囲った親要素にoverflow-x: auto;を設定する点です。これによって横スクロールを可能にしています。

そして、そもそものテーブルにmin-widthの値を設定しています。
この値を下回れば、先ほど設定したoverflow-x: auto;が発動するといった仕組みになります。

今回は600pxと設定しているので、600pxより小さいサイズになる場合は横スクロールが表示されます。仮に横に長いテーブルの場合、大きいサイズにしておけば、PCで見た時でも横スクロールが表示されます。

それら以外はいわば装飾なので、実際にはこの2つを設定しておけばテーブルの横スクロールは行えるようになります。

実際のデモ

実際にこれらのコードで作ったテーブルが下記になります。

同じ設定ですが、min-widthの値を、1000pxにした場合は下記の通りで、PCでの表示の時から横スクロールが表示されるようになります。

より見やすい横スクロールテーブルのための応用

上記のやり方で、基本的に横スクロールのテーブルは完成します。
しかしながら、実際にそのままだけだと、まだ見やすいかどうかは別問題です。

テーブルの中身のテキストが長かったりすると見にくい状況になったりもするので、そのあたりを見やすくするためのワンポイントを合わせて見ておきましょう。

white-space: nowrap; の指定

横スクロールをするということは、テーブルがそもそも横長になっているため、ただでさえ読みにくくなってしまっています。

その中で各セルの中が自動的に改行などされていた場合、読みにくいという状況になります。そんな時は、大枠にwhite-space: nowrap;を設定するとより見やすくなります。

.table-scroll {
  overflow-x: auto;
  white-space: nowrap;
}

これを設定すると、先ほどのテーブルも下記の様になります。

PCの時は普通に表示したくて、スマホでの表示の時のみ改行されないという場合も、スマホ用の設定時にのみ加えればそのように動きます。上と下のテーブルは、PCで見た時は別の見え方になりますが、スマホで見た時は同じ見え方になっているはずです。

スクロールバーの位置を調整する

横スクロールバーを出す場合、PCの表示さとテーブルの直下にすぐ表示されますし、スマホの表示だとテーブルの内側にスクロールバーが表示される場合があります。

tableに枠線などを設定していると被ったりすることもあったり、コンテンツの見せ方などによってはたまに見た目的に微妙だから調整したいとなる事があります。

そんな時は大枠にpadding-bottomを追加するか、table自体にmargin-bottomを入れておくとテーブルとスクロールバーの位置を微調整できます。

/* 下記のどちらかで可能 */

.table-scroll {
  padding-bottom: 10px;
}

.table-scroll table {
  margin-bottom: 10px;
}

テーブルの横スクロールを使う際の注意点

実際に横スクロールを見て来ました。
使い方によっては長いテーブルでも見やすく整理できるので使い方次第ではありますが、使う際に注意もありますので、おさらいしておきましょう。

縦長のテーブルだと見にくいケースも

テーブルは縦×横で表示されますが、横スクロールのテーブルは、今度は逆に縦に長いテーブルだと特にスマホだと見にくくなってしまいます。

下記は一例ですが、例えば10行×2列のテーブルを横スクロールした場合、スマホの画面で見ると端末などによってはテーブルで全部が埋まってしまって、テーブルの全部を見るためには上下にもスクロールが必要で、左右にもスクロールをしなければいけなくなります。

こういった縦長テーブルの場合は、横スクロールができたとしても視認性が非常に悪くなってしまうので注意が必要です。

そもそも横スクロールが必要かどうかも考える

横スクロールができることで、テーブルの見せ方はかなり幅が広がりますが、かといって横スクロールを使えば全てが見やすくなるかというと当然ながらそんな事はありません。

横スクロールをするということは、テーブルの一部は隠れてしまっているという事になりますし、全てをみるながそのテーブルをスクロールしなければ見る事ができないという事でもあります。

例えば、先ほどの15行2列の表がありますが、この場合セルの表示が長かったとしても、そもそも横スクロールをしなくとも、下記の用に、thとtdそれぞれにwidth: 100%;とdisplay: block;を設定するという見せ方もあります。
※スマホで見るかブラウザをスマホサイズまで縮めて確認ください。

こちらだとそのまま縦にスクロールしていけば全部見ることができるので、場合によってはこちらの方が見やすいというケースもあるかもしれません。

なんでもかんでも横スクロールが良いかというのも考え物なので、使うシーンなどによって考えて使っていくようにしましょう。

またこのテーブルでの横スクロールを使う際には、下記で解説しているようなヘッダーなどの部分を固定して表示するという方法もありますので、そちらも合わせて確認してどう使うか考えていきましょう。

まとめ

テーブルの横スクロールについてまとめてみました。
実際に横スクロールはスマホでの表示の際に使われるケースは多いと思いますし、自分もよく使ったりしています。

tableに枠を付けてちょっと設定するだけなので思っている以上に割と導入は簡単で使い勝手は良いので様々なシーンで活用できるかと思います。

ただ横スクロールをするという事はその分だけ隠れたコンテンツがそこにあるということで、使い方や見せ方などによっては逆に使い勝手が悪いというケースが出てくる事もあるので、何でもかんでも横スクロールで対応すればOKというわけでもありません。

使い方をある程度慣れて、どういうシーンで使えば良いかなど考えながら使っていくようにしましょう。