スマホ表示のときのみすべてのテーブルを横スワイプで全体を表示できるように一括でするスタイルシート(CSS)のコードをご紹介いたします。
メディアクエリを使い、任意のサイズ以下の画面表示しているときだけテーブルを横スクロール表示する
テーブル(表)は＜table＞タグでくくられるhtmlの表ですが、画面のサイズが小さくなると、コンテンツの幅を超えて表示されてしまうため画面からはみ出してしまうことがございます。
スマホ用にこの画面サイズをはみ出したテーブルを画面内に収め、スワイプで横スクロールして全体を表示できるようにするコードをご紹介いたします。
※ワードプレスのテーマのStyle.cssやカスタマイザーの追加CSSに下記のコードを追加すると動作します。
@media screen and (max-width:767px) {
table{
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
CSSスタイルシートコードの解説
@media screen and (max-width:767px) { → 横幅767以下の画面表示の場合のみ適応されるスタイルシートという意味です。この部分をメディアクエリと言います。
table{ → テーブルすべてにその下のスタイルを適応します。
display: block; overflow-x: scroll; → テーブルではなくブロック要素として表示し、はみ出した場合横方向にスクロールできるようにするという意味です。
white-space: nowrap; → テーブル内の改行を禁止します
-webkit-overflow-scrolling: touch; → スワイプでスクロールするようにします。
