ホームへ

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

2022年07月05日
ヘッダー ヘッダー
ヘッダー セル セル
ヘッダー セル セル

「↑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であるため、ブラウザによってはうまくいかないこともあります。

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【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内の文字を縦書きにする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ