テーブルヘッダーの縦書きテキストを動的な高さでオーバーフローせずに表示するにはどうすればよいですか?

動的高さとオーバーフローなしでテーブル ヘッダーに縦書きテキストを表示する

CSS 変換プロパティを使用して、回転したテキストをテーブル ヘッダーとして表示するには、次の手順を実行します。ヘッダー行を調整する必要がある場合に、回転されたテキストがオーバーフローするのを防ぐという課題height.

問題:

CSS 変換プロパティ:

transform: rotate(-90deg);

を使用してヘッダー テキストを回転すると、ヘッダー行が元の位置のままになります。元の高さでは回転したテキストがオーバーフローします:

[間違った画像例]

解決策:

必要に応じてヘッダー行を拡大できるようにするには、CSS プロパティを使用します:

writing-mode: vertical-lr;

説明:

writing-mode はテキストの書き込み方向を制御します。値vertical-lrは、テキストが左から右に垂直に書かれることを示します。これにより、回転されたテキストがヘッダー セルの垂直スペース内に収まるようになり、それに応じてヘッダー行の高さを調整できるようになります。

[正しい例の画像]

コード例:

th {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
}

以上がテーブルヘッダーの縦書きテキストを動的な高さでオーバーフローせずに表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。