毎回どうしていたっけ？？？ってなかなか出てこないタグってありませんか？
私の場合ほとんど覚えていないので、材料を毎回以前のスタイルシートから探しているのですが。。。
そんな中の一つ、縦2行で横に並べたテーブルをスマホ用だけ縦2列にする方法。
これってなんだかいつも頭が混乱しちゃうので、忘れないうちにここに書いておこうかと。
| 北海道 | 東北 | 関東･信越 | 北陸･東海 | 近畿 | 中国･四国 | 九州 | 沖縄 |
|---|---|---|---|---|---|---|---|
| 1,500円 | 1,300円 | 1,000円 | 1,000円 | 1,000円 | 1,000円 | 1,500円 | 1,600円 |
こういう表って結構作りません？
これってそのまま載せちゃうと、スマホでは横が切れたり、場合によっては画面サイズがスマホ版と合わず、PC表示になることもあります。
そんな時はこの下記のように、テーブルを組むと解決しますよ。
HTML
<thead>
<tr>
<th>北海道</th>
<th>東北</th>
<th>関東･信越</th>
<th>北陸･東海</th>
<th>近畿</th>
<th>中国･四国</th>
<th>九州</th>
<th>沖縄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,500円</td>
<td>1,300円</td>
<td>1,000円</td>
<td>1,000円</td>
<td>1,000円</td>
<td>1,000円</td>
<td>1,500円</td>
<td>1,600円</td>
</tr>
</tbody>
</table>
CSS
table.unchintable { border-collapse: collapse; width: 100%; }
table.unchintable tbody { text-align:center; }
.post_content td, .post_content th { border: 1px solid #bbb; padding: 10px 15px 7px; line-height: 2.2; background: #fff; }
.post_content th { background: #ddd; font-weight: normal; }
@media screen and (max-width: 550px) {
table.pricebox2 { border: none; background-color: #fff; }
table.pricebox2 thead { float:left; width:50%; }
table.unchintable tr { display:block; margin-bottom: 0px; }
table.unchintable th { display: block; font:#333333; padding: 5px; background-color: #EFEFEF; border: 1px solid #999999; }
}
PAGE TOP