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

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

無料サーバーの弱点

無料サーバーの弱点

そもそもマネタイズとは、ネット上の無料のサービスを使って収益を上げる方

ユーチューバーの料理動画が面白い

ユーチューバーの料理は節約しない

ユーチューバーの料理動画が面白い。 ユーチューバーっていうのは、

Message

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

ミニカーのジャンプ台を学研ブロックで作った。
ミニカーのジャンプ台を学研ブロックで作ってみた

ミニカーのジャンプ台を学研ブロックで作った。 yo

クロックスの上を切り取る必要がある
特許:カバーソックスが履ける改造クロックス・EVAサンダル

クロックス・EVAサンダルってあるじゃないですか。 ク

no image
残業0にすると給料も評価も減った。悪いことづくめだ

働き方改革を進めると評価は上がるはずなのに逆に給料と評価

デスクトップの背景画像が黒単色が好きな理由5つ
デスクトップの背景画像が黒単色が好きな理由5つ

みなさんウインドウズの背景は何にしていますか? 私

年収300万円でも一人目ができたわけだが、人間は欲があるというもので、二人目も欲しい
二人目ができない、インクリアが原因か…育休も欲しい

年収300万円でも一人目ができたわけだが、人間は欲が

→もっと見る

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

PAGE TOP ↑