html - <th> 标签内的 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 出现在它之后的行下方:

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

Answer 1

你可以看看writing-mode :

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

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

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