ワイヤード・パンチ

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

2016年3月29日

今回の問題点。

  • Chromeでtableのセルの中に縦書きテキストを入れても、なぜか上の画像のように、普通どおりの横書きになってしまう。
  • Firefoxの場合だと、縦書きは効いているが、セルから文字がはみ出ている。
  • 現時点でのChromeのバージョンは79.0.3945.130、Firefoxは72.0.1。どちらも64bit。

問題のコード。

CSS

.name {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

td, th {
	border: 1px solid  #000;
}

HTML

<tr>
	<th>
		日付
	</th>
	<th class="name">
		Aさん
	</th>
	<th class="name">
		Bさん
	</th>
	<th class="name">
		Cさん
	</th>
</tr>
<tr>
	<td>2020/1/19</td>
	<td>○</td>
	<td>○</td>
	<td>○</td>
</tr>

修正途中のコード。

CSS

.name {
	writing-mode: vertical-rl;
	white-space: nowrap;
}

HTML

<table>
	<tr>
		<th>
			日付
		</th>
		<th>
			<p class="name">Aさん</p>
		</th>
		<th>
			<p class="name">Bさん</p>
		</th>
		<th>
			<p class="name">Cさん</p>
		</th>
	</tr>
	<!--中略-->
</table>

  • thタグの中にpタグを入れ、そこにclassを当てた。
  • しかし、Chromeでは文字の左右の隙間が広い。
  • Firefoxに至っては、さきほどよりはみ出しがひどくなっている。

修正後のコード。

CSS

.name {
	writing-mode: vertical-rl;
	white-space: nowrap;
	margin: 0;
	line-height: 1em;
}

  • 縦書き文字の左右の隙間はただのmarginなので削った。
  • Firefoxにおけるはみ出しは、lihe-heightの調整しか対処法が見つからなかった。
  • 行間が狭いので、複数行は入れないことをおすすめします。