HTML テーブル内でテキストを垂直方向に回転するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-02 00:23:02

オリジナル

553 人が閲覧しました

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 サイトの他の関連記事を参照してください。