質問: ### 前提・実現したいこと レスポンシブのテーブルで、幅に応じて「段がずれる」ようにしたい ワードプレスでサイト運営をしています。 縦にも横にも項目が多い表(テーブル)がいくつもあり、 PCはともかく、スマホで見たときがどうやっても不自由して困っていました。 で、とあるサイトに、図のような表現手法を見受けました(WPではないサイトですが) ●スマホになると、段がごっそり下にずれる というものです。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/7f0ada81cfd1a24b267b6ea8d3b8d52e.png) こうすれば、今までの不都合が全部解決できそうなので勉強したいのですが、そもそも取っ掛かりがわかりません。 ちなみに現在、プラグイン「TablePress」で表を作っています。 段がずれるようにするための参考になるサイト、あるいは 「ここの部分にこの記述を追加」など、アドバイスをいただけますでしょうか。 ※TablePressのまま実現可能ならいうことないですが、 それ以外の手法ならできる、というのであれば、可能な方を優先いたします
回答: どんな実装になっているかはサイトを見る以外に方法はありませんが、多分その形であればテーブルを複数に分割して表示させているだけでしょう。CSSでテーブルが横並びになるように並べ、PCのときは見出しを消しているのでは。 TablePress をレスポンシブ化するプラグインがあるようです(未確認)。 【WordPress - テーブル実装プラグイン「TablePress」 + レスポンシブ対応】 他のプラグインもいくつかありますね。 【TablePressにも対応!横長テーブルのスマホ対応はFooTableで決まり。【WordPressプラグイン】】 【WordPress – レスポンシブサイトでテーブルを実装するなら「FooTable」がいいね! | みずかず】 【ワードプレスでレスポンシブテーブル作成するならTableMakerが圧倒的にオススメ! – ちょっとだけワードプレス】