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