bizvekorでは table class=”mobile-block” と指定すれば出来ます。
ただし、thead無しの2列の表でしかつかえません。。。と書いてあるんですが、3列ぐらいまで何とか絶えるかな?
それ以上だと、何が何だかw
こ~んな感じ。
[html]
<table class="mobile-block">
<tbody>
<tr>
<th>th 1行目</th>
<td>td1行目1列目 abcdefghijklmnopqrstuvwxyz</td>
<td>td1行目2列目 あいうえおかきくけこさしすせそたちつてとなにぬねの</td>
</tr>
<tr>
<th>th 2行目</th>
<td>td2行目1列目 ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
<td>td2行目2列目 アイウエオカキクケコサシスセソタチツテトナニヌネノ</td>
</tr>
</tbody>
</table>
[/html]
th 1行目 | td1行目1列目 abcdefghijklmnopqrstuvwxyz | td1行目2列目 あいうえおかきくけこさしすせそたちつてとなにぬねの |
---|---|---|
th 2行目 | td2行目1列目 ABCDEFGHIJKLMNOPQRSTUVWXYZ | td2行目2列目 アイウエオカキクケコサシスセソタチツテトナニヌネノ |
画面をグリグリッと小さくして、表示確認して下さい^^
cssは、どうなってるかというと
[css]
@media (max-width:670px){
table.mobile-block td,table.mobile-block th{display:block}
}
@media (min-width:671px){
table.mobile-block td,table.mobile-block th{display:table-cell}
}
[/css]
とな。
こんなんで、なるんだw
かなーり前に紹介した、表作成プラグインWebsimon Tables もレスポンシブだけど、縦積みにはならない(と思う)。
まぁ、自分は基本的にテーブル使わないんだけど、覚えていて損はない^^
- 投稿タグ
- カスタム