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でラッスンゴレライ

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

ログインしてアカウントサービスのほしい物リストをクリック

WEB乞食!amazonのほしい物リストの作り方

ほしい物リストって昔から知ってたんですが使ったことがなかったんです。

Message

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

カツを揚げる10秒待ってからかき混ぜる
油2センチ、塩で180度、バッター液でカツをカリッと揚げる

ためしてガッテンでやっているカラカラパリパリでカリッとに

受験生は薬局でヒロポン買って医大に入って医者になった
年収300万円でも私学の医学部のお金の準備は可能だが高偏差値教育は資金不足

未来の話なので一旦もう忘れるのでメモした。 重要な

学力という格差社会に負けた
40代にもなって年収300万円台は負け組

現代日本の資本主義の稼ぎ方を40年かかっても理解できなか

事務は転職したら3倍働かないといけない
手取りの3倍稼ぎなさいは今でも心に残る言葉

昔、ホームページ制作をリース契約させるホームページ制作会

プラレール博は想像以上に渋滞・人混み・行列・待ち時間
プラレール博は想像以上に渋滞・人混み・行列・待ち時間だった

こんなもんじゃありません、入り口は外から大行列。入る

→もっと見る

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

PAGE TOP ↑