スマホで縦積みになるテーブル

bizvekorでは　table class=”mobile-block”　と指定すれば出来ます。

ただし、thead無しの2列の表でしかつかえません。。。と書いてあるんですが、３列ぐらいまで何とか絶えるかな？

それ以上だと、何が何だかｗ

こ～んな感じ。

[html]
<table class="mobile-block">
　　<tbody>
　　　　<tr>
　　　　　　<th>th 1行目</th>
　　　　　　<td>td1行目1列目 ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ</td>
　　　　　　<td>td1行目2列目 あいうえおかきくけこさしすせそたちつてとなにぬねの</td>
　　　　</tr>
　　　　<tr>
　　　　　　<th>th 2行目</th>
　　　　　　<td>td2行目1列目 ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</td>
　　　　　　<td>td2行目2列目 アイウエオカキクケコサシスセソタチツテトナニヌネノ</td>
　　　　</tr>
　　</tbody>
</table>
[/html]

画面をグリグリッと小さくして、表示確認して下さい^^

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]

とな。

こんなんで、なるんだｗ

かなーり前に紹介した、表作成プラグインWebsimon Tables　もレスポンシブだけど、縦積みにはならない（と思う）。

まぁ、自分は基本的にテーブル使わないんだけど、覚えていて損はない^^

「bizvektorのcss・phpカスタムまとめ」へ