how to rotate text vertically at table column header

Question

I've used this data table at my webpage. This is the fiddle link where I put the code. I want, First Number Second Number column should be vertically rotated. I've made it already. But, problem is after making it, column header and column can't stay along together. Besides this, I want vertical rotated text's column will be as much as possible thinner. But, I can't make it though I set 20px width at that column's header. Another thing is that, at IE8, rotated text's div looks different(padding/margin issue). According to my question, I should only write about my problem/failure of putting rotating text. But, I've written multiple problems here. That's because, all my problems come after putting rotating text at column header(my given plugin's js is a little bit responsible too as it prevent modifying columns's width properly). I believe, if I can put the vertical rotated text in proper way(concerning about IE8 too) and modify table's width properly, no problem will be existing anymore. So, how can I put the vertical rotate text properly at the column's header?

Some Code:

Answer 1

Rotate just the div not the table header.Each th line should look like: <th ><div class="rotate">Fisrt Number Second Number</div></th>

And adjust the rotate css code to:

.rotate {
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
      -ms-transform: rotate(-90.0deg);  /* IE9+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Safari 3.1+, Chrome */
          transform: rotate(-90.0deg);  /* Standard */
}

Here is an updated fiddle