今回の問題点。
- Chromeでtableのセルの中に縦書きテキストを入れても、なぜか上の画像のように、普通どおりの横書きになってしまう。
- Firefoxの場合だと、縦書きは効いているが、セルから文字がはみ出ている。
- 現時点でのChromeのバージョンは79.0.3945.130、Firefoxは72.0.1。どちらも64bit。
問題のコード。
CSS
|
1 2 3 4 5 6 7 8 |
.name { writing-mode: vertical-rl; text-orientation: upright; } td, th { border: 1px solid #000; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
修正途中のコード。
|
1 2 3 4 |
.name { writing-mode: vertical-rl; white-space: nowrap; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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
|
1 2 3 4 5 6 |
.name { writing-mode: vertical-rl; white-space: nowrap; margin: 0; line-height: 1em; } |
- 縦書き文字の左右の隙間はただのmarginなので削った。
- Firefoxにおけるはみ出しは、lihe-heightの調整しか対処法が見つからなかった。
- 行間が狭いので、複数行は入れないことをおすすめします。
追記。iPhoneのSafariについて。(2021/3/3)
iPhoneのSafariでも、テーブル内の縦書きが効かない問題が発生しないのですが、上記のコードで解決しました。
なお、私はiPhoneを所有しておらず、リモートでの仕事先の相手にiPhoneで確認してもらった結果なので、iOSおよびSafariのバージョンは未確認です。
