table要素内で完結するスマホ時に横スクロールになるテーブルレイアウト

[ ID : 561 ]
table要素内で完結するスマホ時に横スクロールになるテーブルレイアウト

概要

既存HTML構造を編集できない場合など、table要素内で完結し、cssの編集だけでスマホ時に横スクロールになる表組み

用途

  • PC幅の際はテーブルレイアウト(複数行・複数列)
  • SP幅(ブレークポイント)でPC幅の見た目を維持したまま横スクロール
  • 既存HTML構造を編集できない場合など、table要素内で完結し、cssのみで対応可能

実装条件

  • table内の子要素が「tbody」のみ

検証ブラウザ

  • Microsoft Edge
  • IE11
  • IE10
  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)

実装方法

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録