如何在可調整儲存格大小的 HTML 表格中將文字旋轉 90 度？

如何在HTML 中將文字旋轉90 度並可調整儲存格大小

在HTML 表格中旋轉文字時，通常會遇到保持儲存格大小一致性的挑戰。為了解決這個問題，讓我們探索使用 CSS 和 HTML 的解決方案，無需進行複雜的高度運算。

訣竅在於使用垂直對齊和文字對齊 CSS 屬性來調整表格儲存格內的文字方向。此外，我們將利用 -ms-writing-mode、-webkit-writing-mode 和writing-mode 屬性來啟用垂直文字書寫。

為了實現 90 度旋轉，我們應用了變換：旋轉（180度）；以確保文字垂直顯示。請注意，此技術可能無法在所有瀏覽器中完美運行，尤其是 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>

這種方法允許旋轉文字表格單元格，同時保留所需的儲存格大小。採用這種技術可以在 HTML 表格中輕鬆地垂直顯示文本，確保您的資料清晰、優雅地呈現。

以上是如何在可調整儲存格大小的 HTML 表格中將文字旋轉 90 度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！