Rotate Text as Headers in a table

visit http://stackoverflow.com/questions/6999523/rotate-text-as-headers-in-a-table-cross-browser

by Ken Watanabe

HTML

<tr>
  <td class='rotated_cell'>
    <div class='rotate_text'>
    &#169;2014&mdash;2015<br/>
    All rights reserved<br/>
    USA
    </div>
  </td>
  <!-- <td class='rotated_cell'>
    <div class='rotate_text'>TEST2</div>
  </td>
  <td class='rotated_cell'>
    <div class='rotate_text'>WOOOOOOOOOOOOOOOOHOOOOOO</div>
  </td> -->
</tr>

CSS

.rotate_text {
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: bottom right;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: bottom right;
  -o-transform: rotate(-90deg);
  -o-transform-origin: bottom right;
  position: relative;
}

table {
  border: 1px solid black;
  table-layout: fixed;
  bottom: 0;
  right: 0;
  width: 69px;
}

th,
td {
  border: 1px solid black;
  width: 23px;
}

.rotated_cell {
  height: 300px;
  vertical-align: bottom
}