小技をBLOGに集結!

table

レスポンシブテーブル

よく聞くことですが、表組(テーブル)がPC画面では綺麗に見れるのにスマホで見ると表組が崩れたりして見づらい事ってよくあります。その理由としては、幅指定のコードが自動挿入されてしまう為です。
また、PC画面は横長表示に対してスマホは縦長表示のためです。
そこで、どうしたらスマホ画面で綺麗にテーブル表示する方法を学んでいきましょう。

横長テーブルレスポンシブ「PC」

列数を保持

項目1 項目2 項目3 項目4 項目5 項目6
コンテンツ内容1 コンテンツ内容2 コンテンツ内容3 コンテンツ内容4 コンテンツ内容5 コンテンツ内容6

横長テーブルレスポンシブ(2列のまま)「PC」

列数(2列)を保持

見出しセル データセル
見出しセル データセル

 

横並びを縦並びにするテーブルレスポンシブ(2列を1列)「SP」

スマホ画面では2列を1列に表示

見出しセル データセル
見出しセル データセル
html CSS

レスポンシブテーブルの注意点

  • テーブル全体の幅をピクセルなどで指定せず。「100%」に設定しておくことでレスポンシブテーブル対応になります。
    但し、ワードプレスが自動で挿入してしまう各セルへの幅指定コードが残っていると、思ったようには表示されません。
  • 列(横項目)の数は最初に決めておく
  • 列項目に合った幅をピクセルでなく表全体の割合(%)で指定する。
  • テーブルの枠線を動かさない!線に触れない!

テーブルの枠線に触れてしまった場合はは、ツールバーの「取り消し」を押すか「Ctrl+Z」キーで一つ前の状態へ戻せます。

関連記事

  1. marker1
  2. 7220032bb1abbfa8d3ffbd64edd01182_s
  3. enkei01
  4. pelican-puzzle
  5. 4e1e24_s
  6. up-down

最近の記事

  1. table
  2. 8470f4_l
  3. 4e1e24_s
  4. ruby-
  5. wordpress-800x480

スマホやタブレットでも大丈夫!

mb300x142

ポップメディア直営サイト

ポップメディア:Web制作支援
 
〒112-0011東京都文京区千石2-33-10-102
 
URL https://popmedia.jp/
 
TEL:03-6912-08214
 
モバイル:080-3409-4566
 
popmedia
contact-bana
PAGE TOP