ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML テーブル内でテキストを垂直方向に回転するにはどうすればよいですか?

HTML テーブル内でテキストを垂直方向に回転するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-11-02 00:23:02
オリジナル
499 人が閲覧しました

How can I rotate text vertically in an HTML table?

HTML テーブル内の垂直テキスト

HTML テーブルのセル内でテキストを垂直方向に回転することは、密なテーブルのスペースを最適化するための一般的なクエリです。この効果を得るには、transform プロパティを利用して CSS スタイルを定義する一般的な方法が一般的です。

1 つの方法では、CSS の回転プロパティを使用します。

.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 */
}
ログイン後にコピー

このスタイルをテーブルに適用することによって、セル内のテキストは反時計回りに 7.5 度回転します:

<code class="html"><td>
  <div class="box_rotate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</td></code>
ログイン後にコピー

このテクニックを使用すると、テキストを垂直方向に変換し、広範囲の見出しやテキストを含む表のスペースを効果的に節約できます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート