tableで縦書きするとおかしくなるときの対処法。

image

近年のブラウザは、縦書きテキストにも徐々に対応してきました。cssにスタイル一つ入れるだけで、簡単に縦書きを実現できるはずです。といっても、まだまだ開発段階であると思われます。通常のテキストならばほぼ問題ないのですが、tableタグの中にあるテキストを縦書きにすると、なぜか文字が90度寝転がってしまいました。

広告

問題のコード。

CSS

.name {
    writing-mode: tb-rl; /* IE用 */
    writing-mode: vertical-rl; /* Chrome、Firefox用 */
    text-orientation: upright;
}

HTML

<table>
    <tr>
        <th scope="col">
            日付
        </th>
        <th scope="col" class="name">
            Aさん
        </th>
        <th scope="col" class="name">
            Bさん
        </th>
        <th scope="col" class="name">
            Cさん
        </th>
    </tr>
</table>

「writing-mode: vertical-rl」もしくは「writing-mode: tb-rl」を使えば、縦書きにできます。「name」というclassをあてたthタグに対して縦書きを実行しているのですが、chromeの場合だとなぜかtableのセル内のテキストが、横向きに寝転がってしまいます。

image

一方、こちらはfirefoxで表示させた例です。一見、chromeほど悲惨には見えませんが、thタグはデフォルトで横中央寄せがかかるはずなのに、firefoxの場合は打ち消されています。

なお、どのブラウザでもアルファベットは縦書きにするとひらがなと違う方向に寝転がってしまうため、これが気になってしまう場合は「text-orientation: upright」でひらがなと向きを合わせられます。

対処法。

image

CSS

.name {
    writing-mode: tb-rl; /* IE用 */
    writing-mode: vertical-rl; /* Chrome、Firefox用 */
    margin: 0 auto;
    white-space: nowrap;
    width: 1em; /* firefox対策 */
    line-height: 1em; /* firefox対策 */
    text-orientation: upright;
}

HTML

<table>
    <tr>
        <th scope="col">
            日付
        </th>
        <th scope="col">
            <p class="name">Aさん</p>
        </th>
        <th scope="col">
            <p class="name">Bさん</p>
        </th>
        <th scope="col">
            <p class="name">Cさん</p>
        </th>
    </tr>
</table>

thタグの中にpタグを一つ挟むことにしました。そのpタグに対してclassをあてて、中身を追加することで対処できます。そのままだとなぜか1文字ずつで改行されてしまうため、「white-space: nowrap」で改行されないようにします。

image

なお、Firefoxの場合は中央揃えになっていなかったので、「width: 1em」でpタグの幅を1文字分だけにして、「margin: 0 auto」で横の空白を均等に揃えます。また、「line-height: 1em」も追加して、行間をなくします。

以上、完全な縦書き対策とは言えませんが、1行分ならばtable内でも縦書きを実現できるはずです。

IEとEdgeにおける問題点。

image

IE11にてtableの縦書きを表示させると、なぜかセルが画面の高さいっぱいに広がってしまいました。さらに、横中央寄せも効いていません。

image

しかも、IEよりも新しい存在であるEdgeでも、同様の現象が発生してしまいました。何なんだこのゴミブラウザ。

Edgeはともかく、今どきIEなんぞに対応するのはバカらしいのですが、どうしてもIEとEdgeにも対応させたい場合、セルのheightや、pタグの横marginを固定値にするなりして、それっぽく見せないといけないでしょう。

なお、safariについてですが、apple製品は所有していないので未検証です。