表を横にスクロール可能なレスポンシブテーブルを実装する

スクリーンサイズが小さいスマートフォン画面で表組みする際は、はみ出した部分を横にスクロール可能なレスポンシブテーブルという手法を使います。JavaScriptで作った専用のライブラリもありますが、CSS設定だけで簡単に実装する方法を解説します。

レスポンシブテーブルのスマホ画面

作成するテーブルは右図になります。

横幅はスクリーンサイズに応じて変化しますが、640pxをブレイクポイントとして行と列が反対になります。

640pxより小さいスクリーンでは横にスクロール可能なレスポンシブテーブルとなります。

スマホでもPCでも動作するデモページを用意しましたのでご覧ください。

>> レスポンシブテーブル DEMO ページへ

【コンテンツ】

  1. HTMLコードを作成する
  2. CSSコードを作成する

HTMLコードを作成する

テーブル部分の HTMLコードは以下になります。

注意点は、コードの中で </tr> と <tr> の間に、コメント記号を挿入しているところです。これはtr要素を「display:inline-block」にして横に並べる際、後に続くタグを改行すると半角スペース分の隙間が挿入されるのを防ぐ処置です。

CSSコードを作成する

基本的なテーブル部分の CSSコードは以下になります。

この状態では、テーブルは以下のように表示されます。

テーブルのPC表示画面

次に小さいスクリーン用にコードを追加します。

このコードでのポイントは、以下になります。

  • thead要素を左にフロートしてtbody要素の左に回り込ませます。
  • 左にフロートしたthead要素内のth要素をブロック要素にして縦にならべます。
  • tbody要素内のtr要素に「display:inline-block」を指定し、横に並べます。
  • 横に並んだtbody要素内のtd要素をブロック要素にして縦にならべます。
  • tbody要素に「overflow-x: auto;」を指定し、はみ出した部分を横にスクロールして表示できるようにします。「white-space: nowrap」はセル内での折り返しを禁止する処置です。

これで小さいスクリーンのときに横にスクロール可能なレスポンシブテーブルが完成しました。
デモページは以下です。

>> レスポンシブテーブル DEMO ページへ

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ