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

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

VISTAで画面暗転エラー画面+警告表示を消す方法

VISTA対応でないソフトを起動すると画面が暗転しエラー画面がでる

twitterをブログに自動投稿・転載にFC2のまとめ機能を使いました

twitterをブログに転載したいのに、ネットで調べると、ブログをツイ

Message

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

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

no image
アイデア:お好み焼きバー

最近は食わず嫌いが多く、おいしいまずいにかかわらず と

ウインドウズフォトの取り込み機能のエラーが麺
iphoneの写真バックアップが途中で止まる?解決方法決定版!

windowsでiphoneの写真バックアップに相当てこ

爆弾を落としたほうが勝ち、基地を作ったほうが負けです。
積み木爆弾落としゲーム

この遊びは昔、自分の弟とよくやりました。 遊びの名

4才幼児がハマる、A4コピー用紙にミニカーの道を書く遊び
4才幼児がハマる、A4コピー用紙にミニカーの道を書く遊び

4才男幼児ならハマる A4コピー用紙に自分で鉛筆や

no image
近寄らないで、飛ばす車、ボコボコの車は危険!

危険な人、車には自分から近づかないのが吉です。 例えば

→もっと見る

PAGE TOP ↑