子要素が全て横並びになってしまうので、柔軟なレスポンシブ対応ができない。 PCは6列、spは3列x2行にしたい場合（NG） PCは6列、spは1列6行にしたい場合(OK) 1番目と2番目の子要素を横並びにさせて、3番目だけを横1列にしたい場合（NG） 横並びを縦並びにするテーブルレスポンシブ ... spanで見出しを表現するテーブルレスポンシブ. レスポンシブデザインをやるときに必ずテーブルの対応で悩んでしまいます。今回はよく使う方法を実例を作ってまとめてみました。 簡単なcssで実装する方法もあるので、案件に合わせて参考にしてもらえると嬉しいです！ テーブル全体の幅をピクセルなどで指定せず。「100％」に設定しておくことでレスポンシブテーブル対応になります。 【CSS】レスポンシブな「dl dt dd」を作る (14,429) 【jQuery】slickでサムネイル付きのスライダーを作る (8,151); Surface 3（サーフェス 3）携帯ネットワークが認識しない（表示しない）場合の解決方法 (4,603) 【CSS】ul liを使った縦メニューリスト サンプル (3,051) 【CSS】コピペでOK。 見出し01(th) 見出し02(th) 見出し03(th) 見出し04(th) レスポンシブテーブルの注意点. 問題が生じてくるのはレスポンシブでコーディングする場合。 スマートフォンで表示する場合は、以下のようにレイアウトしたい。 要するにスマートフォンの場合は、横並びのtr要素のth要素・td要素を 縦に並べたい わけです。 「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたりして確認してみてください。) TableP