Rotate Text as Headers in a table (cross browser)

Question

This is not a question.
I just felt that after spending this much time figuring out how to do this I would hate myself if i didn't save it somewhere and I would be a lousy programmer if I didn't share what I had found. (Killing two birds with one stone here.)

So here is the code for rotating text in a table to act as a header.

<html>
<head>
<!--[if IE]>
   <style>
      .rotate_text
      {
         writing-mode: tb-rl;
         filter: flipH() flipV();
      }
   </style>
<![endif]-->
<!--[if !IE]><!-->
   <style>
      .rotate_text
      {
         -moz-transform:rotate(-90deg); 
         -moz-transform-origin: top left;
         -webkit-transform: rotate(-90deg);
         -webkit-transform-origin: top left;
         -o-transform: rotate(-90deg);
         -o-transform-origin:  top left;
          position:relative;
         top:20px;
      }
   </style>
<!--<![endif]-->

   <style>  
      table
      {
         border: 1px solid black;
         table-layout: fixed;
         width: 69px; /*Table width must be set or it wont resize the cells*/
      }
      th, td 
      {
          border: 1px solid black;
          width: 23px;
      }
      .rotated_cell
      {
         height:300px;
         vertical-align:bottom
      }
   </style>

</head>
<body>

   <table border='1'>
      <tr>
         <td class='rotated_cell'>
            <div class='rotate_text'>Test1</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>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
   </table>

</body>
</html>

The best way to handle this would be to start with a question - "How to Rotate Text as Headers in a table (cross browser)?" and then provide an answer. — KatieK, Aug 09 '11 at 16:38
Next time you should look at writing something like this Q&A style http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/ — Blowsie, May 31 '13 at 15:05

Rotate Text as Headers in a table (cross browser)

0 Answers0

Linked