ホームページ > 記事 > ウェブフロントエンド > セル サイズを調整できる HTML テーブルでテキストを 90 度回転するにはどうすればよいですか?
HTML テーブルでテキストを回転する場合、セル サイズの一貫性を維持する際に課題が発生するのが一般的です。これに対処するために、複雑な高さの計算を必要とせずに CSS と HTML を使用するソリューションを検討してみましょう。
その秘訣は、CSS のvertical-align プロパティと text-align プロパティを使用して、表のセル内のテキストの方向を調整することです。 。さらに、-ms-writing-mode、-webkit-writing-mode、writing-mode プロパティを利用して、縦書きテキストを有効にします。
90 度の回転を実現するには、変換を適用します。 : 回転(180度);テキストが垂直方向に表示されるようにします。この手法は、すべてのブラウザ、特に Chrome では完全に機能しない可能性があることに注意してください。Chrome では の使用が必要です。要素を使用して、テーブル ヘッダー (
実際の例を次に示します。
<code class="css">th { vertical-align: bottom; text-align: center; } th span { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }</code>
<code class="html"><table> <tr> <th><span>Rotated text by 90 deg.</span></th> </tr> </table></code>
このアプローチでは、テキストの回転が可能になります。必要なセル サイズを維持しながらテーブル セルを作成します。このテクニックを活用すると、HTML テーブルに縦書きテキストを手間なく表示でき、データが明確かつエレガントに表示されます。
以上がセル サイズを調整できる HTML テーブルでテキストを 90 度回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。