【html/CSS】tableの縦横を入れ替える方法

「パソコンで横長の表をスマホで縦にしたい！」

tableの縦横を下記のように入れ替える方法を解説します。

tableにwriting-mode:vertical-lr

「writing-mode:vertical-lr」は文字を縦書きにするCSSです。

これをtableに指定すると表の縦横マスを入れ替えることができます。

都道府県	県庁所在地	人口	面積
北海道	札幌市	518万人	78400㎢
東京都	新宿区	1400万人	2190㎢
大阪府	大阪市	880万人	1910㎢

<style>
table{
    writing-mode: vertical-lr;
}
th,td{
    writing-mode: horizontal-tb;
}
</style>
<table border="1">
    <tr>
        <th>都道府県</th>
        <th>県庁所在地</th>
        <th>人口</th>
        <th>面積</th>
    </tr>
    <tr>
        <th>北海道</th>
        <td>札幌市</td>
        <td>518万人</td>
        <td>78400㎢</td>
    </tr>
    <tr>
        <th>東京都</th>
        <td>新宿区</td>
        <td>1400万人</td>
        <td>2190㎢</td>
    </tr>
    <tr>
        <th>大阪府</th>
        <td>大阪市</td>
        <td>880万人</td>
        <td>1910㎢</td>
    </tr>
</table>

ただし、これだけでは子孫要素に「writing-mode:vertical-lr」が引き継がれ、文字が縦書きになってしまいます。

そこでthとtdに「writing-mode:horizontal-tb」を指定し、横書きに戻します。

ちなみに…display:flexでできないか試してみましたが、2行以上になったときに行の高さがそろわなくなるため、不可能でした。