<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; }
}

 

, , , ,

TOPICS

  1. 前から気になっていた金勝山へ。多くの方がハイキングされるのがわかります。とても素晴らしい山でした…
  2. 仕事がほぼデスクワークなので、自慢だった脚力がどんどん無くなり、長時間立っていたり少し歩いただけで膝…
  3. 先日開催された忍夜討に撮影部隊として参加してきました。多くの参戦者が集まり、白熱した戦いが行われ…
  4. まるで宮崎駿作品の天空の城ラピュタのようだと有名になった長浜の「土倉鉱山跡」。最近では写真映えス…
  5. 私が昔、所属していた甲賀市商工会青年部が11月に「甲賀流忍者大祭2022」を開催するそうです。忍…
にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ
PAGE TOP