ホームページ > 記事 > ウェブフロントエンド > CSS を使用して HTML テーブル内のテキストを垂直方向に回転させる方法

CSS を使用して HTML テーブル内のテキストを垂直方向に回転させる方法

DDDオリジナル: 2024-10-27 08:26:03721ブラウズ

How to Rotate Text Vertically in HTML Tables Using CSS?

HTML 表の縦書きテキスト

HTML 表のセルの多くには、かなりのスペースを占める見出しが含まれています。スペースを節約するには、テキストを垂直方向に回転することを検討してください。これを実現する移植可能なソリューションは次のとおりです。

CSS Transform Method

このメソッドは、CSS 変換を利用してテキストを回転します。さまざまなブラウザをサポートし、クロスプラットフォームソリューションを提供します。 CSS コードは次のとおりです。

<code class="css">.box_rotate {
  -moz-transform: rotate(7.5deg); /* Firefox 3.5+ */
  -o-transform: rotate(7.5deg); /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg); /* Safari 3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6, IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}</code>

HTML の使用法

回転を使用するには、テキストを

内で囲むだけです。要素を追加し、CSS クラス .box_rotate を適用します。以下に例を示します。

<code class="html"><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></code>

実装すると、最初と 3 番目の

は、要素はテキストを水平方向に表示し、2 番目の

要素はテキストを水平に表示します。要素 (.box_rotate クラスを使用) は、反時計回りに 7.5 度回転したテキストを表示します。

以上がCSS を使用して HTML テーブル内のテキストを垂直方向に回転させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html for while using class this display transform table

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS Transform Scale を使用して jQuery の正しいドラッグ/サイズ変更動作を実現するにはどうすればよいですか?次の記事：CSS Transform Scale を使用して jQuery の正しいドラッグ/サイズ変更動作を実現するにはどうすればよいですか?

続きを見る