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 もレスポンシブだけど、縦積みにはならない(と思う)。

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

 

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