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:

<table id="example" class="dataTable display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="rank">Rank</th>
      <th class="wider">User Inserted Title Name</th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>System Architect and Analyser</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Accountant</td>
      <td>4</td>
      <td>13</td>
      <td>7</td>
      <td>11</td>
      <td>8</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Junior Technical Author</td>
      <td>5</td>
      <td>26</td>
      <td>9</td>
      <td>3</td>
      <td>19</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

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