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

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

H22.7月現在アマゾンアフィリエイト結果報告と今後の展望について

H22.7月現在アマゾンアフィリエイト結果報告と今後の展望について

頑張って更新しているのです。だが記事数は増えてもアクセス数は横ばい

女性が借金やクレジット地獄に落ちる体験談を書いたブログ

女性が借金やクレジット地獄の体験談を書いたブログ

たまたまバンドの追っかけというキーワードでネットサーフィンしていたら、

Message

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

ホテルのアメニティの髭剃りを1年間使った結果
ホテルのアメニティの髭剃りを1年間使った結果

先日家族旅行に行ってきました。 去年の旅行で持って帰っ

おとっぺウイルスの感染原因と対策・治療法
おとっぺウイルスの感染原因と対策・治療法

どうでもいい話だけど、息子とNHKのアニメおとっぺを

王寺駅の鉄道イベントの感想はクーポン券が貰えるから節約になる
王寺駅の鉄道イベントの感想はクーポン券が貰えるから節約になる

王寺駅で行われている鉄道祭りに初めて行ってみました。

no image
第2子の不妊治療に125万円使いました、冗談です

二人目がなかなかできない… そろそろ諦めるしか無いのか

大阪市が委託してて猪名川動物霊園で猫は眠っているそう
大阪市、保健所の死んだペットの引き取りの値段・費用は1700円、ペットの葬儀を盛大にすると呪われる噂

最近、実家の愛猫が亡くなった。 仕事と休日も忙しく

→もっと見る

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

PAGE TOP ↑