css - 元件未固定到位

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，它可以解决问题，但会导致标题元素在屏幕尺寸不同时无法停留在正确位置的新问题。当未添加 float 但随后将其分开时，我可以让它留在原地，如图所示。

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>

希望对你有帮助:)

----编辑----

你可以试试把table改成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;
}