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を使って縦書き設定することですね。
スマートです。
思いつきで書いたので、自分でやりやすい方法を選択していただければと思いますね。

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

毎日更新止めたらアクセスが3分の2でラッスンゴレライ

毎日更新止めたらアクセスが3分の2でラッスンゴレライ

これは痛い。 最近仕事が忙しくて毎日更新できなかった。 理由は

no image

自分のホームページ作るときの種類と選び方

ある個人商店の方がホームページを作るというのでアドバイスをする内容を考

Message

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

no image
追い焚きできない風呂だとイヤイヤ期は大変だ

夫婦2人の新居のハイツのお風呂は追い焚きできない事に対し

no image
狭い道を譲らない黒いワゴン ハイブリッド車 ナンバープレート1桁

生活道路で一方通行ではない道。 近所に住む黒いワゴン 

ハッピーセットのシールが髪の毛につく事故
ハッピーセットのシールが髪の毛につく事故

マクドナルドのハッピーセットのシールを剥がして服に着

脊髄損傷が点滴だけで治る。歩けるまでの期間は7か月
脊髄損傷が点滴だけで治る。歩けるまでの期間は7か月

NHKで脊髄損傷の人が歩けるようになる再生治療の治験

no image
NHK朝ドラのテーマがアニメの見解

アニメといえば昭和生まれの団塊の世代にとっては悪い印象

→もっと見る

  • いいだしっぺ(これでいいだ)
    ブログのもくじ 私のプロフィール
    現代の幸福論に挑戦しています。
    ウクレレブログ好き。

PAGE TOP ↑