TablePressで作成した以外のtableのresponsive化
これについては以下のサイトに詳しく書かれているのでそれを参考にすればいい。
http://design-spice.com/2012/11/01/responsive-table/
基本的にはやはりmedia_queryを使って、横に長い表を縦の組み替えるか、リスト表示に変えるかする方法。
ここでもdisplayプロパティがよく使われる。
これをワードプレスで使うにはカスタムフィールドが必要になる。
以前の表で一部やってみた。表は以下。
| 商品番号 | 商品名 | 容量 | 税込卸価 | 詳細 | 購入 |
|---|---|---|---|---|---|
| 01K201 | 家庭用カビ取り剤サール | １Ｌ | 1,296 | 詳細 | 購入 |
| 02KS01 | 業務用除カビ洗浄剤S1 | １Ｌ | 1,512 | 詳細 | 購入 |
| 04KS05 | 業務用除カビ洗浄剤S5 | ５Ｌ | 6,480 | 詳細 | 購入 |
| 05K116 | 業務用除カビ洗浄剤S6 | １６Ｌ | 20,304 | 詳細 | 購入 |
| 06KJ31 | 頑固なカビ取り剤Ｊ3本ｾｯﾄ | １００ｇ | 1,944 | 詳細 | 購入 |
| 07KJ50 | 頑固なカビ取り剤 | ５００ｇ | 2,052 | 詳細 | 購入 |
すでにここではcssをカスタムフィールドにインストールしてある。
これに以下をsample_02.cssとして追加してみる。
|
1 2 3 4 5 6 7 8 9 10 11 |
@media only screen and (max-width: 420px) { .sample_01 tbody{ display: -webkit-box; overflow-x: auto; } .sample_01 tr, .sample_01 th, .sample_01 td{ display: block; } } |
若干の表示のずれがあるようだけど何とかできる。
これはワードプレスだけに使えるわけではないのはもちろんだ。
