significa - tablas en html5

Texto de rotación CSS solo dentro de la etiqueta<th>

Question

Estoy tratando de rotar el texto -90 grados dentro de algunas celdas:

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

El problema es que mi navegador parece estar rotando todo el elemento th ... lo que significa que su ancho parece convertirse en su nueva altura ... observe a continuación cómo aparece el th debajo de la fila que viene después:

Me gustaría que el texto simplemente ajuste su tamaño / forma para que se adapte al texto vertical, ¿es esto posible?

Answer 1

Puede echar un vistazo al 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>

otro ejemplo http://codepen.io/gc-nomade/pen/EKQKBe