CSSでテーブルをスマホで見る時は横スクロールする方法

テーブル要素をスマホ表示にする際に、簡単なテーブルならスマホでの表示もすぐに対応できるのですが、いくつもの要素を比較している場合のテーブルだと、スマホ用にレイアウトを変更するのはかなり難しいですよね。

今回はそうした場合のテーブルを、スマホで表示する場合に、横スクロールして見やすくする方法をご紹介していきたいと思います！

まずはテーブルを組みます

1. まずは、普通にテーブルを組んでいきます。
2. そして、そのテーブルをdivの囲い、親要素を追加します。
3. 追加した親要素のdivには、任意の名前のクラス名を付与します。

以下のようなHMTLを組みます。

<div class="table_wrap">
  <table>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
      <th>項目3</th>
    </tr>
    <tr>
      <th>項目A</th>
      <td>テキスト本文が入りますテキスト本文が入ります</td>
      <td>テキスト本文が入りますテキスト本文が入ります</td>
    </tr>
    <tr>
      <th>項目B</th>
      <td>テキスト本文が入りますテキスト本文が入ります</td>
      <td>テキスト本文が入りますテキスト本文が入ります</td>
    </tr>
    <tr>
      <th>項目C</th>
      <td>テキスト本文が入りますテキスト本文が入ります</td>
      <td>テキスト本文が入りますテキスト本文が入ります</td>
    </tr>
  <table>
</div>

次にCSSで表示を整えます。

.table_wrap{
  overflow-x: scroll;
}

table{
 width: 1000px;
}

実行結果

以下のように表示されていたら完成です。

今回はデモでお作りしているので、最低限のHMTLとCSSで表現いたしましたが、このようにテーブルが横スクロールできるようになっていれば完成です。

ポイントは親要素に入っているcssプロパティの「overflow-x: scroll;」で横にスクロースさせるように命令をしているところになります。

まとめ

CSSでテーブルの表示をスマホで見る時は横スクロールさせる方法についてご紹介いたしましたが、いかがだったでしょうか？

この方法は既存のHTMLを親要素で囲い、囲んだ親要素にCSSを追加するだけですので、以外と簡単に追加できます。

スマホでのテーブル表示にお悩みの方の参考になれば幸いです！