table CSS

ブラウザ幅が小さくなったら(800px)項目を縦書きに変更

table要素は、レスポンシブデザインの中で厄介な要素です。

縦書きに変更してみます。

主な都市の降雪量・積雪量（平年値）
都市

降雪量累計

最深積雪

1月平均気温

 都市

降雪量累計

最深積雪

1月気温
札幌 597 cm 100 cm -3.6 °C 軽井沢 136 cm 36 cm -3.5 °C
青森 669 cm 111 cm -1.2 °C 富山 383 cm 62 cm 2.7 °C
秋田 377 cm 38 cm 0.1 °C 金沢 281 cm 44 cm 3.8 °C
山形 426 cm 50 cm -0.4 °C 東京 12 cm 6 cm 6.1 °C
盛岡 272 cm 39 cm -1.9 °C 名古屋 16 cm 8 cm 4.5 °C
仙台 71 cm 17 cm 1.6 °C 彦根 104 cm 26 cm 3.7 °C
石巻 54 cm 17 cm 0.7 °C 岐阜 47 cm 17 cm 4.4 °C
福島 189 cm 25 cm 1.6 °C 鳥取 214 cm 46 cm 4.0 °C
いわき - - 3.8 °C 松江 89 cm 20 cm 4.3 °C
新潟 217 cm 36 cm 2.86 °C 福岡 4 cm 3 cm 6.6 °C
NY 26.8 cm - cm 0.1 °C シカゴ 97 cm - cm -4.3 °C

https://ja.wikipedia.org/wiki/%E4%BB%99%E5%8F%B0%E5%B8%82

CSS

@media screen and (max-width: 800px) {
 th p{
 writing-mode: tb-rl;
height:100px;
 -webkit-writing-mode: vertical-rl;
 text-align: justify;
 text-justify: inter-ideograph;
 -ms-text-justify: inter-ideograph;
 }
}
th p{
 margin-bottom:0;
}
th{
 background:#ecf0f1;
}

レインドロップス テーマでのモバイル時のテーブル処理

レインドロップステーマでは、テーブルが表示幅をオーバーフローする場合、スクロールバーを下部に表示します。

主な都市の降雪量・積雪量（平年値）
都市 降雪量累計 最深積雪 1月平均気温 都市 降雪量累計 最深積雪 1月気温
札幌 597 cm 100 cm -3.6 °C 軽井沢 136 cm 36 cm -3.5 °C
青森 669 cm 111 cm -1.2 °C 富山 383 cm 62 cm 2.7 °C
秋田 377 cm 38 cm 0.1 °C 金沢 281 cm 44 cm 3.8 °C
山形 426 cm 50 cm -0.4 °C 東京 12 cm 6 cm 6.1 °C
盛岡 272 cm 39 cm -1.9 °C 名古屋 16 cm 8 cm 4.5 °C
仙台 71 cm 17 cm 1.6 °C 彦根 104 cm 26 cm 3.7 °C
石巻 54 cm 17 cm 0.7 °C 岐阜 47 cm 17 cm 4.4 °C
福島 189 cm 25 cm 1.6 °C 鳥取 214 cm 46 cm 4.0 °C
いわき - - 3.8 °C 松江 89 cm 20 cm 4.3 °C
新潟 217 cm 36 cm 2.86 °C 福岡 4 cm 3 cm 6.6 °C
NY 26.8 cm - cm 0.1 °C シカゴ 97 cm - cm -4.3 °C

新着記事

投稿日: tenman
投稿グループ 未分類

コメントは受け付けていません。