title: Rotate Text as Headers in a table (cross browser)
body: <p>This is not a question.<br>
  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.)</p>
  
  <p>So here is the code for rotating text in a table to act as a header.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;!--[if IE]&gt;
     &lt;style&gt;
        .rotate_text
        {
           writing-mode: tb-rl;
           filter: flipH() flipV();
        }
     &lt;/style&gt;
  &lt;![endif]--&gt;
  &lt;!--[if !IE]&gt;&lt;!--&gt;
     &lt;style&gt;
        .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;
        }
     &lt;/style&gt;
  &lt;!--&lt;![endif]--&gt;
  
     &lt;style&gt;  
        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
        }
     &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
     &lt;table border='1'&gt;
        &lt;tr&gt;
           &lt;td class='rotated_cell'&gt;
              &lt;div class='rotate_text'&gt;Test1&lt;/div&gt;
           &lt;/td&gt;
           &lt;td class='rotated_cell'&gt;
              &lt;div class='rotate_text'&gt;TEST2&lt;/div&gt;
           &lt;/td&gt;
           &lt;td class='rotated_cell'&gt;
              &lt;div class='rotate_text'&gt;WOOOOOOOOOOOOOOOOHOOOOOO&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;
     &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>