備忘録として、HTMLのtable要素を縦にするテクニックを記載しておきます。
tableを縦にするのはスマホ対応の時に多いです。
「PC表示は横表示だけど、スマホは縦にしたい」といった場合ですね。
意外にも簡単に出来るので、やり方を覚えておきましょう。
HTMLのテーブルを縦にする方法！
まず、適当なテーブルを作成します。
|
1 2 3 4 5 6 7 8 |
<table> <tr> <th>テスト１</th><td>内容１</td><th>テスト２</th><td>内容２</td> </tr> <tr> <th>テスト３</th><td>内容３</td><th>テスト４</th><td>内容４</td> </tr> </table> |
ちなみに表示はこんな感じになります。
（コードは厳密には違いますが、気にしないでください）
| テスト１ | 内容１ | テスト２ | 内容２ |
|---|---|---|---|
| テスト３ | 内容３ | テスト４ | 内容４ |
PCではよくある構成ですね。
ただ、スマホだとちょっと横に幅を取りすぎています。
そんな時は、CSSに以下を指定してみましょう。
|
1 2 3 |
table tr th,table tr td{ display:block; } |
これを指定すると、テーブルは下記のような感じになります。
| テスト１ | 内容１ | テスト２ | 内容２ |
|---|---|---|---|
| テスト３ | 内容３ | テスト４ | 内容４ |
表組が一気に縦になりましたね。デザインは修正する必要がありますが、
枠組みそのものは問題なさそうです。
このようにCSSに少し記述するだけで、HTMLのテーブルを縦組みへと変えることができました。