Html 如何在表格的tbody元素内垂直旋转文本？

如何在表格的tbody元素内垂直旋转文本

所有的例子都是基于ader元素，但是对于tbody来说，它不能正常工作

---

我使用HTML和CSS。

在HTML中旋转的代码是：

style='transform: rotate(90deg);transform-origin: left top 0;'

例如，如果文本位于右侧，请使用float:right；原地旋转

请尝试以下代码：

<style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table class="tg">
  <tr>
    <th class="tg-031e" rowspan="3" ><p style='transform: rotate(-90deg);'>Y Axis<p><br></th>
    <th class="tg-031e">CONTOUR</th>
    <th class="tg-031e"></th>
  </tr>
  <tr>
    <td class="tg-031e">MY GRAPH IS PLOTTED HERE</td>
    <td class="tg-031e">SCALE</td>
  </tr>
  <tr>
    <td class="tg-031e">X AXIS</td>
    <td class="tg-031e"></td>
  </tr>
</table>

---

我希望它会有用。

谢谢你的回答。问题是单元格的宽度和高度没有调整。这里是我得到的：如果你想旋转YAxis文本。检查编辑的答案。我看到了你的代码。你正在尝试旋转td。要旋转文本，请替换为：

Y轴

谢谢！是的，它正在工作。现在唯一的问题是单元格的宽度太大，就像文本没有旋转一样。在你的课上，试着在旋转后给出宽度。