htmlでtableの文字を縦書きにする2つの方法

公開日: : 最終更新日:2014/09/16 インターネット

テーブルの中で文字を縦書きにしたいことってあるじゃないですか。
たとえば、紙媒体を再現したいときです。
できるだけスマートに表現するならやっぱりCSSを使うことでしょうね。

CSSで縦書き設定

htmlでtableの文字を縦書き CSSで設定
tdの中でspanでスタイルシートを縦書きに設定すればいいです。
<td><span Style=”writing-mode:tb-rl;”>効果C<br>※追加文字</span></td>

テーブルの幅をフォント1文字サイズに設定

テーブルの幅をフォント1文字サイズに設定

他にもtdのサイズを狭く設定するという方法もあります。
問題点として、縦書きに二行追加すると行が崩れる。
かといって一文字一文字にBRの変換を入れるのはダサい。
(効<br>果<br>C<br><br>※<br>追<br>加<br>文<br>字)

<td width=”12″>効果C<br>※追加文字</td>

私のオススメはspanでcssを使って縦書き設定することですね。
スマートです。
思いつきで書いたので、自分でやりやすい方法を選択していただければと思いますね。

ほかにもこれ読んでみませんか?

IE11と楽天ツールバーでブラウザクラッシュの対策方法

最近、高スペックのパソコンに乗り換えました。OSもVISTAからW

twitterをlivedoorblogに自動投稿する方法

弟が毎日せっせとtwitterをやっています。 twitterは

Message

メールアドレスが公開されることはありません。

時代は光じゃなくホームルーターだな。

眉毛の形をスマホアプリで整えるいい方法を思いついた
眉毛の形をスマホアプリで整えるいい方法を思いついた

眉毛の形を整えるのは初心者には無理。 女性は化粧に

no image
なぜ寝てるのを無理やり起こしてお茶、歯磨き、トイレのルーチンをするのか

寝たいときに寝かせてあげたいのに 寝る前には絶対にお茶

この赤いケーブルをデスクトップパソコンに繋げると電源が切れた
umidejiのスマホが充電できないは電源の接触不良かと思いきや?

1か月前からumidejiのスマホが充電できるときと出来

特許:新型コロナは看護配置の少ない包括病棟に入院させるのが最善策じゃない?
特許:新型コロナは看護配置の少ない包括病棟に入院させるのが最善策じゃない?

とうとう新型コロナワクチンが医療従事者に接種が始まり

no image
電気と光を合せられない

どうしても電気と光を合せられない。 結局は諦めた。

→もっと見る

  • これだブログ
    ブログのもくじ 現代の幸福論に挑戦しています。
    ウクレレブログ好き。

PAGE TOP ↑