如何將表格儲存格中的文字向左旋轉 90 度並根據文字長度調整儲存格大小？

如何將文字向左旋轉90 度並根據HTML 中的文字調整儲存格大小

使用CSS 轉換將文字儲存格向左旋轉90 度可以有挑戰，例如錯位和格式混亂。為了解決這些問題，我們可以實作嚴格的 CSS 和 HTML 解決方案，根據文字長度動態調整儲存格大小。

在 HTML 程式碼中，我們使用 。元素來包含我們要旋轉的文字：

<code class="html"><table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td id="rotate"><span>10kg</span></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td id="rotate"><span>20kg</span></td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td id="rotate"><span>30kg</span></td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
</table></code>

接下來，我們應用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>

以下是它的工作原理:

• 第一個規則將單元格垂直對齊到底部，文字對齊到中心。
• 第一個跨度規則將垂直書寫模式應用於文本，翻轉180度，防止換行。

利用CSS書寫模式的能力，我們可以根據文字的長度動態調整單元格大小，確保文字正確旋轉而不影響桌子的佈局。此方法對於列內文字長度變化較大的場景特別有用。

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