Q&A
###前提・実現したいこと
tableの行ヘッダのみを縦書きにしたいと考えています。
具体的には以下の図のような表示を行いたいです。
cssのwriting-modeを利用したところ、chromeでは文字が90度横に回転するだけだったので、別の方法を考えたのですが、
文字と文字の間にある「・」のみ横にはみ出してしまいました。
以下が実際のコードになります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<style> 5 #tateTH{ 6 width:1em; 7 } 8 /*以下は見やすくするために付けていますが無くても同様の問題が発生します。*/ 9 *{ 10 border-collapse: collapse; 11 } 12 th,td{ 13 border:1px solid #000; 14 } 15</style> 16</head> 17<body> 18 <table> 19 <tr><td rowspan="5"><p id="tateTH">ほげ・ふが</p></td><td>りんご</td></tr> 20 <tr><td>かぼちゃ</td></tr> 21 <tr><td>メロン</td></tr> 22 <tr><td>チーズ</td></tr> 23 <tr><td>ラズベリー</td></tr> 24 </table> 25</body> 26</html>
どうすれば縦に修正できるでしょうか。
また、ほかに行ヘッダのみ縦書きにする綺麗な方法は無いでしょうか。
回答1件
0
ベストアンサー
これでいかがでしょう？
#tateTH { width: 1em; word-break: break-all; /* こちらを追加 */ }
投稿2017/02/17 10:23
総合スコア2722
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/17 10:29