CSS 在 <th> 标签内旋转纯文本

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

CSS 在 <th> 标签内旋转纯文本

CSS rotation text-only inside <th> tag

html

css

html-table

css-transforms