如何在 HTML 表格中將文字旋轉 90 度而不弄亂對齊方式？

使用HTML 和CSS 將文字向左旋轉90 度並調整單元格大小

解決HTML 中旋轉文字擾亂單元格對齊的問題表，需要更精確的方法。我們可以利用 HTML 和 CSS 的文字方向和對齊屬性，而不是使用 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 元素的writing-mode 屬性。為了解決這個問題，我們將文字包裝在一個 span 元素中，並套用 -webkit-writing-mode 屬性來確保跨瀏覽器相容性。

以上是如何在 HTML 表格中將文字旋轉 90 度而不弄亂對齊方式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！