【CSS】レスポンシブ対応スライダーテーブル
レスポンシブ対応のホームページの制作で面倒なものの一つに表がある.
横に並んだものを縦にする CSS はよく目にするが,横長のものだと項目が多い場合に訳が分からなくなる.
そこで,横に長いテーブルをスマホ時には横スクロールで見えるようにするテーブルの書き方を紹介してみる.

テーブル表の項目を固定して横スクロール
以下にテーブルがあるが,この画面をスマホでみるか,パソコンの場合,横幅を狭めていってほしい.
項目固定の横スクロールテーブル解説
以下では 768px をブレイクポイントとしてスマホモードに移行している.
考え方としてはテーブルを div で括り,スマホではそれを overflow: auto; (scrollとほぼ同じ意味)にし,全体を margin-left で右にずらす.
最初の左端項目列だけ位置を左端にposition: absolute; で固定する.
要は基本的にはみ出た部分はスクロールするようにするが,左端の項目名だけは左端に固定した表示にして動かないようにする.他の部分に関しては margin-left で左端の項目の幅分だけ右にずらすということをしているだけ.
以下にサンプルコードを書くので参考にしてください.
サンプルコード(CSS)
サンプルコード(HTML)
ご質問等ありましたら,下のフォームからお願いします.