Skip to content Skip to sidebar Skip to footer

CSS Rotation Text-only Inside Tag

I am trying to rotate the text -90 degrees inside some th cells: The problem is that my browser appears to be rotating the whole th element... meaning that its width seems to turn

Solution 1:

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


Post a Comment for "CSS Rotation Text-only Inside Tag"