レスポンシブのテーブルで、幅に応じて「段がずれる」ようにしたい（ワードプレス）

Question

###前提・実現したいこと
レスポンシブのテーブルで、幅に応じて「段がずれる」ようにしたい

ワードプレスでサイト運営をしています。
縦にも横にも項目が多い表（テーブル）がいくつもあり、
ＰＣはともかく、スマホで見たときがどうやっても不自由して困っていました。

で、とあるサイトに、図のような表現手法を見受けました（ＷＰではないサイトですが）
●スマホになると、段がごっそり下にずれる
というものです。

こうすれば、今までの不都合が全部解決できそうなので勉強したいのですが、そもそも取っ掛かりがわかりません。
ちなみに現在、プラグイン「TablePress」で表を作っています。
段がずれるようにするための参考になるサイト、あるいは
「ここの部分にこの記述を追加」など、アドバイスをいただけますでしょうか。

※TablePressのまま実現可能ならいうことないですが、
それ以外の手法ならできる、というのであれば、可能な方を優先いたします

Answer 1

どんな実装になっているかはサイトを見る以外に方法はありませんが、多分その形であればテーブルを複数に分割して表示させているだけでしょう。CSSでテーブルが横並びになるように並べ、PCのときは見出しを消しているのでは。

---

TablePress をレスポンシブ化するプラグインがあるようです（未確認）。

【WordPress - テーブル実装プラグイン「TablePress」 + レスポンシブ対応】
http://kwski.net/wordpress/1094/

他のプラグインもいくつかありますね。

【TablePressにも対応！横長テーブルのスマホ対応はFooTableで決まり。【WordPressプラグイン】】
http://fukudon.com/footable-responsive-table/

【WordPress – レスポンシブサイトでテーブルを実装するなら「FooTable」がいいね！ | みずかず】
http://mizukazu.minibird.jp/footable/

【ワードプレスでレスポンシブテーブル作成するならTableMakerが圧倒的にオススメ！ – ちょっとだけワードプレス】
http://www.lifelongstudy.info/entry/2016/02/10/231737

Comments

[glanglan]

いただいたアドレス大変参考になりました

Answer 2

リキッドレイアウトのことでしょうか
javascriptのプラグインとしては「Masonry」等が有名ですね。
Masonry
様々な実装方法があるので
「リキッドレイアウト」、「フレキシブルレイアウト」、「メディアクエリ」等のワードで検索して見た上で方向性を決めたほうがいいかもしれません。

リキッドレイアウトを使用したwordpressのテーマをまとめている記事なども参考になるかと思います。
可変グリッドレイアウト（リキッドレイアウト）のサイトやWordPressテーマなど集めました

Comments

[glanglan]

あ、レイアウトじゃなくて、「表（テーブル）」です。
例えばＰＣで「９列のテーブル」があったとして
スマホで見ると、「３列が縦に３っつ並ぶ」っていうテーブルをとあるサイトで見たんです

[koronatail]

テーブルを隙間なく並べて同じ要領で縦並びにしてヘッダーをメディアクエリで表示非表示すればと思いましたがそれでは不十分ですかね？
TablePressではそこまでできませんしワードプレスのプラグインでそこまで自在にテーブルを弄れるものは見たことが無いのでjavascriptで分割するしかないと思います。
ごりごり書けなそうであればjavascriptタグを追加してライブラリを探すほうが良いかもしれません。