CSS旋轉文本里面只有<th>標籤

Question

我想旋轉文本-90度內一些th細胞：

.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的出現方式下方的那行c omes後：

我想它，以便使其適應垂直文本的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