[解決済み] HTMLテーブルの縦書き（回転）テキスト
2022-09-03 18:07:26
質問
HTMLテーブルのセル内のテキストを90°回転させる（ポータブルな）方法はありますか？
(列の多い表で、見出しのテキストが多いので、スペースを節約するために縦書きにしたいのですが)
どのように解決するのですか？
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
2017年現在、前述のサイトはルールセットを簡素化し、レガシーなInternet Explorerのフィルタをやめ、今では標準となっている
transform
プロパティ
:
.box_rotate {
-webkit-transform: rotate(7.5deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(7.5deg); /* IE 9 */
transform: rotate(7.5deg); /* Firefox 16+, IE 10+, Opera */
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] input type="button "に背景画像を追加するには？
-
[解決済み] CSSでテキストや画像の背景を透明にするには？
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか？
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける？
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は？
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか？
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] slackのチームIDやチャンネルIDを調べる最も簡単な方法は何ですか？
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか？
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] hr要素の色を変更する
-
[解決済み] フレックスアイテムを右寄せにするには？
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は？
-
[解決済み] div内の画像の下に余分なスペースがある