【html/CSS】table内の文字を縦書きにする方法

	ヘッダー	ヘッダー
ヘッダー	セル	セル
ヘッダー	セル	セル

「↑tableの一列目のヘッダーを縦書きにしたい！」

table内の文字を縦書きにする方法を解説します。

writing-mode:vertical-rlを指定

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

縦書きにしたい文字があるth(td)の列幅に指定しましょう。

	ヘッダー	ヘッダー
ヘッダー	セル	セル
ヘッダー	セル	セル

<style>
.example th:first-child{
    writing-mode: vertical-rl;
}
</style>
<table border="1" class="example">
    <tr>
        <th></th>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

thやtdにheightが指定されていると改行されてしまうため、heightは消しましょう。

基本的にはこの方法がオススメですが、新しいCSSであるため、ブラウザによってはうまくいかないこともあります。

一列目の指定方法はこちら↓

【htmlだけ】brで一文字ずつ改行する

縦書きにしたい単語（文章）をbrで一文字ずつ改行すると縦書きにできます。

	ヘッダー	ヘッダー
ヘ ッ ダ ー	セル	セル
ヘ ッ ダ ー	セル	セル

<table border="1">
    <tr>
        <th></th>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
    </tr>
    <tr>
        <th>ヘ<br>ッ<br>ダ<br>ー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <th>ヘ<br>ッ<br>ダ<br>ー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

htmlだけでできるのはメリットですが、アクセシビリティ的によろしくありませんし、何よりメンドウです。

「ー」伸ばし棒が縦書きにならないデメリットもあります。

幅を1emにして自動改行させる

縦書きにしたい文字があるth(td)の列幅を1em（1文字分）にして、自動改行させ、縦書きにする方法です。

	ヘッダー	ヘッダー
ヘッダー	セル	セル
ヘッダー	セル	セル

<style>
.example2 th:first-child{
    width: 1em;
    line-height: 1.2em;
}
</style>
<table border="1" class="example2">
    <tr>
        <th></th>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

ついでにline-heightで文字の隙間を詰めることもできます。

brよりだいぶマシですが、伸ばし棒は縦書きになりません。

【まとめ】table内の文字を縦書きにする方法

• 【おすすめ】writing-mode:vertical-rlで縦書きにする
• brで一文字ずつ改行して縦書きにする
• 幅を1emにして自動改行させて縦書きにする

以上、table内の文字を縦書きにする方法でした。