将表格标题中的文本旋转 90 或 270 度后对齐 [重复]答案

【问题标题】：Align Text in Table header after rotating it 90 or 270 degree [duplicate]将表格标题中的文本旋转 90 或 270 度后对齐 [重复]
【发布时间】：2021-12-04 10:44:57
【问题描述】：

我已经旋转了表格中的标题文本，但现在的问题是，我无法将其居中。它应该居中对齐，但它只是从中心开始，看起来很奇怪。我不能发布图片，因为这是我的第一个问题。

我的 CSS：

<style>
.myClass {height: 350px; 
column-width: 20px;
text-align: left;
    white-space:nowrap; 
    g-origin:50% 50%;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    } 
</style>

和我的 Html 表格

<table border="1">
    <tr>
        <th class="myClass">Secondlongheadear
        </th>
        
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Second long headear
        </th>
        
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
     </tr>
    </table>

【问题讨论】：

g-origin 是什么？也许你想要transform-origin？
@AnuragSrivastava 我只是在寻找代码来对齐它。不知道这句话的确切含义。 transform-origin 也不起作用。如果可能，请帮助对齐它

标签： html css

【解决方案1】：

.myClass {
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 8vh;
}

table {
  font-size: calc(1vh + 2vw);
  vertical-align: center;
  text-align: center;
  width: 80vw;
  height: 70vh;
}

table tr:last-child {
  max-height: 20%;
  background-color: red;
}

<table>
  <caption>Your Table
    <caption>
      <thead>
        <th class="myClass">Secondlong headear
        </th>

        <th class="myClass">Secondlong headear
        </th>

        <th class="myClass">Second long headear
        </th>
      </thead>
      <tbody>
        <tr>
          <td>tbody</td>
          <td>tbody</td>
          <td>tbody</td>
        </tr>
      </tbody>
      <tfoot>
        <td class="costam">foo</td>
        <td>foo</td>
        <td>foo</td>
      </tfoot>
</table>

【讨论】：

感谢您的回复，但并非所有浏览器都支持“writing-mode: vertical-rl”。这个我已经试过了。