CSS旋转文本仅在标签内

Question

我正在尝试在部分 th单元格内旋转文字-90度：

.th-vert {
  -webkit-transform: rotate(-90deg);
}

<table class="table table-striped" border="1">
  <thead>
    <tr>
      <th>0000</th>
      <th class="th-vert">0000</th>
      <th class="th-vert">0000</th>
      <th class="th-vert">0000</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

问题是我的浏览器似乎正在旋转整个th元素...意味着它的宽度似乎变成了它的新高度...请注意下面th的出现方式< em>在后面的行：

我希望th只是调整其大小/形状，使其适应垂直文本，这可能吗？

Answer 1

您可以查看writing-mode：

＆＃13;

＆＃13;

.th-vert {
 writing-mode:vertical-rl;
 padding:0 1.25em 0 0;
}

＆＃13;

<table class="table table-striped" border="1">
  <thead>
    <tr>
      <th>0000</th>
      <th class="th-vert">0000</th>
      <th class="th-vert">0000</th>
      <th class="th-vert">0000</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

另一个例子http://codepen.io/gc-nomade/pen/EKQKBe