セル サイズを調整できる HTML テーブルでテキストを 90 度回転するにはどうすればよいですか?

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