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

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

CSSに追記+変更だけでレスポンシブルにした昔のサイト

最近の私のサイト作りはまったく成果はでないけど、楽丸でコンテンツサイト

ブログでプロでも半年に月5000円しか稼げないイケダハヤト事務所ワロス

イケダハヤトのブログ塾の方のブログ見てました。 馬鹿にできないイ

Message

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

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

no image
卒FIT後、契約してなかったを後悔

卒FIT後、契約してなかったを後悔‥ 関西電力は自動買

iphoneSE2が無料!AUの3Gガラケーをガチホしていたが損切り

持っているのはフミコフミオ氏が使用していたものと同じ

吉本新喜劇風の原稿、レストランのコアなファンの襲来

吉本新喜劇風の原稿を書いてみました。 暇じゃないよ?

no image
引っ越しのサカイのブラック面接?はこんな感じでした。

引っ越しのサカイの面接を受けたことがある。 ただの時間

no image
格安バス旅行は90分密室の毛皮や磁気ネックレスを売るアクセサリー屋に連れて行かれる

スーパーの懸賞の無料でバス旅行だったり、激安のバス旅行の

→もっと見る

PAGE TOP ↑