PR
よく使うパソコンだと横に、スマホだと縦に並ぶテーブルのサンプルコードです。
PR
概要
CSSのみで実装
なるべくシンプルに作る
汎用性が高い(コピペしてすぐに使える)
レスポンシブ対応
作り方
(1)2セルのみの簡単なテーブル_tbl_a
html
<table class="tbl_a">
<tbody><tr>
<th>店名</th>
<td>サンプルストア新宿店</td>
</tr>
<tr>
<th>住所</th>
<td>東京都新宿区西新宿1-11-111◯◯ビル1F</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;
}
}
PR
PR