<CSSテクニック>横並びの表をスマホ用に縦2列で表示させる方法

毎回どうしていたっけ???ってなかなか出てこないタグってありませんか?
私の場合ほとんど覚えていないので、材料を毎回以前のスタイルシートから探しているのですが。。。

そんな中の一つ、縦2行で横に並べたテーブルをスマホ用だけ縦2列にする方法。
これってなんだかいつも頭が混乱しちゃうので、忘れないうちにここに書いておこうかと。

北海道東北関東・信越北陸・東海近畿中国・四国九州沖縄
1,500円1,300円1,000円1,000円1,000円1,000円1,500円1,600円

こういう表って結構作りません?
これってそのまま載せちゃうと、スマホでは横が切れたり、場合によっては画面サイズがスマホ版と合わず、PC表示になることもあります。
そんな時はこの下記のように、テーブルを組むと解決しますよ。

HTML

<table class=”unchintable”>
<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; }
}

 

EVENT

5月
31
全日 しがのフォトコン!!2021
しがのフォトコン!!2021
5月 31 2021 – 2月 14 2022 全日
しがのフォトコン!!2021
びわこビジターズビューローが開催するフォトコンテストが始まりました。 滋賀ならではの絶景写真や心和む身近な風景写真など、滋賀を好きになる作品のご投稿を送って素敵なものをGETしましょう! テーマは「魅力ある滋賀」 身近な所で見つけたとっておきの風景や紹介したくなる滋賀の四季を収めた写真が随時UPされています。 ぜひ素敵な一枚を送ってみましょう。 募集期間:2021年05月31日~2022年02月14日 応募規約:こちらから確認いただけます 入賞賞品:フォトコンテストには、滋賀県内各地の市町・観光協会が協賛。 入賞者には地元スイーツや観光チケットなど、滋賀県各地からの逸品をプレゼント♪ しがのフォトコン詳細ページ

LOCAL LINK

PROMOTION VIDEO

にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ

Access

  • 463,118
PAGE TOP