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

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

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

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

こ～んな感じ。


<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>

　　<tbody>

　　　　<tr>

　　　　　　<td>td1行目1列目ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ</td>

　　　　　　<td>td1行目2列目あいうえおかきくけこさしすせそたちつてとなにぬねの</td>

　　　　</tr>

　　　　<tr>

　　　　　　<td>td2行目1列目ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</td>

　　　　　　<td>td2行目2列目アイウエオカキクケコサシスセソタチツテトナニヌネノ</td>

　　　　</tr>

　　</tbody>

</table>

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

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

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}
}