【CSS】レスポンシブ対応スライダーテーブル

最終更新日: 公開日: 2020年12月

レスポンシブ対応のホームページの制作で面倒なものの一つに表がある.
横に並んだものを縦にする CSS はよく目にするが,横長のものだと項目が多い場合に訳が分からなくなる.

そこで,横に長いテーブルをスマホ時には横スクロールで見えるようにするテーブルの書き方を紹介してみる.

スライダー

テーブル表の項目を固定して横スクロール

以下にテーブルがあるが,この画面をスマホでみるか,パソコンの場合,横幅を狭めていってほしい.

項目 横項目1 横項目2 横項目3 横項目4 横項目5 横項目6
縦項目1 レスポンシブ対応 横スクロール テーブル スライダー スマホOK CSS
縦項目2 レスポンシブ対応 横スクロール テーブル スライダー スマホOK CSS
縦項目3 レスポンシブ対応 横スクロール テーブル スライダー スマホOK CSS

項目固定の横スクロールテーブル解説

以下では 768px をブレイクポイントとしてスマホモードに移行している.

考え方としてはテーブルを div で括り,スマホではそれを overflow: auto; (scrollとほぼ同じ意味)にし,全体を margin-left で右にずらす.
最初の左端項目列だけ位置を左端にposition: absolute; で固定する.

要は基本的にはみ出た部分はスクロールするようにするが,左端の項目名だけは左端に固定した表示にして動かないようにする.他の部分に関しては margin-left で左端の項目の幅分だけ右にずらすということをしているだけ.

以下にサンプルコードを書くので参考にしてください.

サンプルコード(CSS)

サンプルコード(HTML)

 タグ: , , , ,  
 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
Apache Chrome 拡張機能 CSS Git Google HTML javascript Page Speed Insights PHP python SEO Windows WordPress z-index アナリティクス エディタ サーチコンソール サーバー管理 スライダー タグマネージャー テレワーク デザイン データベース ネットワーク フォーム ページ閲覧解析 マーケティング リッチリザルト レスポンシブ レスポンシブ対応 ログ解析 ローカル環境構築 営業
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop