Question

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

所有示例都基于theader元素，但对于tbody，它无法正常工作。

我使用HTML和CSS。

Answer 1

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

我希望它会有用。

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

1 个答案: