PCで横・スマホで縦並びになるテーブル

よく使うパソコンだと横に、スマホだと縦に並ぶテーブルのサンプルコードです。

概要

CSSのみで実装
なるべくシンプルに作る
汎用性が高い（コピペしてすぐに使える）
レスポンシブ対応

作り方

(1)２セルのみの簡単なテーブル_tbl_a

html

<table class="tbl_a">
<tbody><tr>
<th>店名</th>
<td>サンプルストア新宿店</td>
</tr>
<tr>
<th>住所</th>
<td>東京都新宿区西新宿1-11-111◯◯ビル１F</td>
</tr>
</tbody></table>

CSS

.tbl_a {width:100%;}
.tbl_a th, td { padding: 10px; border: 1px solid #ddd; }
.tbl_a th { background: #f4f4f4; }

/* smartPhone */
@media screen and (max-width: 640px) {
.tbl_a th,
.tbl_a td{
display: block;
border-top: none;
}
}