CSS旋转纯文本内部< th>标签 [英] CSS rotation text-only inside <th> tag

问题描述

< pre class =snippet-code-css lang-css prettyprint-override> .th-vert {-webkit-transform：rotate（-90deg）;} < table class =table table-stripedborder =1> p $ p>

$ b

我的浏览器似乎在旋转整个 th 元素......这意味着它的宽度似乎变成了它的新高度......注意 th 出现在之后的行之后：

：

b
$ b

<预class =snippet-code-css lang-css prettyprint-override> .th-vert {writing-mode：vertical-rl; padding：0 1.25em 0 0;}

< table class =table table-stripedborder =1> < THEAD> < TR> <的第i 0000 LT /第> < 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>

另外一个例子 $ b

a href =http://codepen.io/gc-nomade/pen/EKQKBe =nofollow noreferrer> http://codepen.io/gc-nomade/pen/EKQKBe

I am trying to rotate the text -90 degrees inside some th cells:

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

The problem is that my browser appears to be rotating the whole th element... meaning that its width seems to turn into it's new height... notice below how the th is appearing beneath the row that comes after it:

I would like it so that the th simply adjusts its size / shape so that it accommodates the vertical text, is this possible?

解决方案

You may take a look at 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>

another example http://codepen.io/gc-nomade/pen/EKQKBe

这篇关于CSS旋转纯文本内部&lt; th&gt;标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！