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

HTML テーブル内のテキストを垂直に回転する

HTML テーブルのセル内のテキストを垂直に 90 度回転するには、CSS 変換を使用します。この方法はテキスト見出しと通常の表セルの両方に適用でき、スペース使用率を最適化しながら十分なテキストを収容できます。

CSS 変換テクニック:

CSS 変換プロパティにより、回転を含む要素の視覚的特性の操作。テキストを回転するための CSS スニペットは次のとおりです:

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

HTML 実装:

表のセル内でテキストを垂直方向に整列するには、CSS クラスを適切な HTML 要素に割り当てます。 :

<code class="html"><div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div></code>

ブラウザのサポート:

CSS 変換とフィルター技術により、ブラウザ間の互換性が保証されます:

• Firefox 3.5
• Opera 10.5
• Safari 3.1
• Chrome
• Internet Explorer 6-8

回転角度:

7.5 度の回転角度は、可読性にとって最適です。ただし、特定の要件を満たすように調整できます。

追加の観察:

• CSS プレフィックスは、より広範なブラウザーのサポートのために含まれています。
• 影響を受ける要素に、回転されたテキストを収容するのに十分な高さがあることを確認してください。
• 回転されたセル内のテキストの配置は、使用するブラウザとフォントによって若干異なる場合があります。

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