セルのサイズを変えずに HTML テーブル内のテキストを回転するにはどうすればよいですか?

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;
}</code>

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

これらのスタイル調整を実装すると、適切なセル サイズと書式を維持したままテキストを 90 度回転することが可能になります。

以上がセルのサイズを変えずに HTML テーブル内のテキストを回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。