スマートフォンでテーブルを横スクロールさせる方法【CSS2行！】

こんにちは！

最近はデザインとコーディングのスケジュールが交互に入っていて、バランスよく仕事ができている社員Aです👩

デザインをずっとやっていると、「そろそろコーディングやりたいな」と恋しくなるし、逆もしかりなのです（笑）

ここにたまにLP制作の案件が入ってくると、もっとバランスよくなります。

どちらも均等にレベルアップさせていきたいので、今みたいなバランスが一番合っている気がします。

さて、今回は「スマートフォンでテーブルを横スクロールさせる方法」をご紹介します。

料金表やプランなどPCでは見やすいテーブルレイアウトでもスマホで100%表示になると、崩れてしまって見づらいという減少はコーダーさんあるあるではないでしょうか。

特に今はスマートフォンユーザーの割合が圧倒的に多いので、スマートフォンでもきれいに見えるように整えなければなりません。

そんなときに使えるのが、今回の方法です。

まず、見にくい例を見てみましょう。

パソコン用にデザインされたテーブルをスマートフォンで見たときの実例を見てみましょう。

【PCでの表示】

【スマートフォンでの表示】

画面に合わせて縮まるので、文字が改行されてしまい、読みづらくなってしまいました。

スマートフォンでテーブルを横スクロールさせる方法

スマートフォンでもこの表をすっきりと読みやすいものにする方法は、横スクロールを実装するのが最適だと思います。

横スクロールできるテーブルは下記のようなものです。

指でスクロールしながら読める形になりました。表が勝手に改行されたりしないため、読みやすいですね。

やり方は下記の通りです。

1.テーブルをdivで囲む

まずはテーブルをdivで囲み、任意のクラスを付与してください。

ここでは、「scroll_table」のクラスを使って実装していきます。

<div class="scroll_table">
  <table>
    <tr>
      <th>
      </td>
      <th>iPhone XS
      </td>
      <th>iPhone XS Max
      </td>
      <th>iPhone XR
      </td>
    </tr>
    <tr>
      <td>サイズ
      </td>
      <td class="text-center">5.8インチ
      </td>
      <td class="text-center">6.5インチ
      </td>
      <td class="text-center">6.1インチ
      </td>
    </tr>
  </table>
</div>

2.CSSを追加する

続けて、CSSに下記を追加します。

.scroll_table{
　overflow: auto;
  white-space: nowrap;
}

これだけで、テーブルが横スクロールできるようになり、可読性も上がりました。

まとめ

私もこの方法を知るまでは、スマホサイトのテーブルレイアウトに苦戦しており、わざわざスマホ用にテーブルを組み直したりしていたのですが、この方法を知ってからはコーディングも時短できています。

それに、ユーザー側からしてもすっきりとして見やすいレイアウトになっているのが良いです。

スマホサイトのテーブルレイアウトに悩まれている方は是非活用してみてください！

CSSたった2行で実装できる手軽さが良い！