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に追記+変更するだけで昔のサイトをレスポンシブルにした

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

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

メントスコーラ時限爆弾の作り方

メントスコーラ起爆装置の作り方

はじめ社長などのユーチューバーの動画を見ていると、みんなやってるコーラ

猫がクーラーに登る

初心者がアフィリエイトで儲からないのは成功者の話を聞くから

初心者がアフィリエイトで陥る罠とは、FXしかり株しかり。 それは、「

月10万PV達成しました

ブログ飯したい月3万円ブロガーが月5万円に挑戦中

私のブログは副サイトあわせて、1日UV3000ビューを超え月3万円にな

にぷららLTE無制限プラン契約してみた

一番安いLTE対応スマホにぷららLTE無制限プラン契約してみた

スマホ買ったよ! おそらく今買えるLTE端末の中で一番安いやつ!

グーグルウェブマスターツールで原因を探る

googleのインデックス削除は一時的?からの登録の方法

もともと少ないアクセスが0になってしまいました。 せっかく作ったペー

Message

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

耳の穴にニキビができて痛い。写真あり
耳の穴にニキビができて痛い。写真あり

最近耳の穴が狭くなってきた。 そして触ると痛い。

痰吸引で介護者の不眠
目の下の隈にも効果あり!乾燥肌に塗る順番はローション>クリーム>ワセリンです

乾燥肌にローションをおすすめしない理由はすぐ乾くから

テレビでやっていたタオルで片足ずつ前屈がかなり効いた
テレビで体が硬かったのに1時間でこんなに柔らかくなったは嘘の理由

毎日、朝仕事に行って夜帰ってきて夕食作成 子供をお風呂

2018年のミキハウス1万円福袋の中身ネタバレ
2018年のミキハウス1万円福袋の中身ネタバレ

2018年1月1日発売のミキハウスの福袋を大みそかに購入

馬見丘陵公園イルミは立地的には香芝インターもしくは法隆寺インター
奈良の穴場無料イルミネーション馬見丘陵公園は駐車場もタダ

馬見丘陵公園に夜に行ってきました。 なぜって、無料

→もっと見る

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

PAGE TOP ↑