ワイヤード・パンチ

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

2016年3月29日

今回の問題点。

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

問題のコード。

CSS

HTML

修正途中のコード。

CSS

HTML

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

修正後のコード。

CSS

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

追記。iPhoneのSafariについて。(2021/3/3)

iPhoneのSafariでも、テーブル内の縦書きが効かない問題が発生しないのですが、上記のコードで解決しました。

なお、私はiPhoneを所有しておらず、リモートでの仕事先の相手にiPhoneで確認してもらった結果なので、iOSおよびSafariのバージョンは未確認です。