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

2016年3月29日

近年のブラウザは、縦書きテキストにも徐々に対応してきました。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のセル内のテキストが、横向きに寝転がってしまいます。

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

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

対処法。

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」で改行されないようにします。