CSSテーブルでテキストを垂直方向に回転させる方法

)内のテキストを垂直方向に回転させる方法についてご説明します。以下に、いくつかの方法とそれぞれのコード例を示します。

方法1: transform プロパティを使用する方法

th {
  transform: rotate(-90deg);
  white-space: nowrap;
}

方法2: writing-mode プロパティを使用する方法

th {
  writing-mode: vertical-lr;
  white-space: nowrap;
}

方法3: writing-mode プロパティと text-orientation プロパティを組み合わせる方法

th {
  writing-mode: vertical-lr;
  text-orientation: sideways;
  white-space: nowrap;
}

これらの方法は、テーブルのヘッダセル内のテキストを90度または270度回転させます。white-space: nowrap; を追加することで、テキストが折り返されずに表示されるようになります。

上記の方法を使用することで、テーブルのヘッダセル内のテキストを垂直方向に回転させることができます。適用したい方法を選び、必要に応じてスタイルを調整してください。