HTML テーブル内のテキストを配置を乱さずに 90 度回転するにはどうすればよいですか?

HTML と CSS を使用してセル サイズを調整してテキストを左に 90 度回転する

HTML で回転されたテキストがセルの配置を乱す問題に対処するにはテーブルを作成するには、より正確なアプローチが必要です。 CSS 変換を使用する代わりに、HTML と CSS のテキストの方向と配置のプロパティを利用できます。

次のコード スニペットでは、この手法が使用されています。

<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>

書き込みモードを適用することにより、プロパティを回転されたテキスト要素に設定すると、テキストが回転された要素の軸に対して垂直に流れるように強制されます。これにより、適切な配置が確保され、隣接するセルにテキストがはみ出すことがなくなります。

特に、Chrome は th 要素の書き込みモード プロパティをサポートしていません。これに対処するために、テキストをspan要素でラップし、 -webkit-writing-mode プロパティを適用してブラウザ間の互換性を確保します。

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