元素未固定到位

Question

我有一个标题，我想要垂直而不是水平。我使用过的CSS确实将其水平翻转，但创建了一个单独的边框。

像这样：

#scheduled2 {
  transform: rotate(270deg);
  position: relative;
  top: 300px;
  background-color: darkgray;
  font-size: 14px;
}
th {
   border: 1px solid lightgray;
   padding: 12px;
}

<table>
  <tr>
    <th id="scheduled2">Scheduled Volumes</th>
  </tr>
  <tr>
    <th id="manning2">Manning Volumes</th>
  </tr>
</table>

如果我使用float：right，它可以解决问题，但是当屏幕尺寸不同时，会导致title元素的新问题不在正确的位置。当未添加浮动元素时，我可以将其保留在原位，但随后将其分离，如图像中所示。

Answer 1

尝试使用此CSS：

writing-mode: vertical-rl;
text-orientation: mixed;

或尝试将文本放入<p></p>

<table>
  <tr>
  <th><p id="scheduled2">Scheduled Volumes</p></th>
  </tr>
  <tr>
    <th id="manning2">Manning Volumes</th>
  </tr>
</table>

希望它会有所帮助：）

----编辑----

您可以尝试将表格th更改为div

<div class="border" id="scheduled2">Scheduled Volumes</div>
<div class="border" id="manning2">Manning Volumes</div>

和CSS：

#scheduled2 {
  transform: rotate(270deg);
  position: relative;
  top: 300px;
  background-color: darkgray;
  font-size: 14px;
}

.border{
     border: 1px solid lightgray;
   padding: 12px;
}

Answer 2

我已经解决了问题。 th的CSS代码与Scheduled2的代码矛盾，因此我将代码从th移出并将其添加到Scheduled2。因此，借助此CSS，我设法在屏幕上的正确位置获取了文本verticle，并且不再移动。

CSS：

#scheduled2 {
    transform: rotate(270deg);
    float: right;
    position: relative;
    top: 1340px;
    left: 250px;
    background-color: darkgray;
    font-size: 14px;
    border: 1px solid lightgray;
    padding: 12px;
}