CSS を使用して HTML テーブルのテキストを回転し、セル サイズを調整する
テーブルのセル内のテキストを回転しようとする場合は、次のことも考慮することが重要ですセルサイズへの影響。提供された例に示されているように、セル サイズを調整せずに CSS 変換を使用してテキストを回転すると、結果が歪む可能性があります。
この問題を解決するには、テーブルとセルのスタイルを調整する必要があります。表のヘッダー (th) にvertical-align:bottomとtext-align:centerを設定すると、回転後にテキストが正しく配置されます。
特に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;
}
Rotated text by 90 deg.
これらのスタイル調整を実装すると、適切なセル サイズと書式を維持したままテキストを 90 度回転することが可能になります。
以上がセルのサイズを変えずに HTML テーブル内のテキストを回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。