title: how to rotate text vertically at table column header
body: <p>I've used this <a href="http://www.datatables.net/" rel="nofollow noreferrer">data table</a> at my webpage. This is the <a href="http://jsfiddle.net/fxju7/2/" rel="nofollow noreferrer">fiddle</a> 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 <strong>after making it, column header and column can't stay along together.</strong> <strong>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.</strong> Another thing is that, <strong>at IE8, rotated text's div looks different(padding/margin issue)</strong>. 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, <strong>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</strong>. So, <strong>how can I put the vertical rotate text properly at the column's header</strong>?</p>
  
  <p>Some Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="example" class="dataTable display" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="rank"&gt;Rank&lt;/th&gt;
        &lt;th class="wider"&gt;User Inserted Title Name&lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="rotate"&gt;
          &lt;div&gt;Fisrt Number Second Number&lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;System Architect and Analyser&lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;6&lt;/td&gt;
        &lt;td&gt;20&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;6&lt;/td&gt;
        &lt;td&gt;20&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;Accountant&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;13&lt;/td&gt;
        &lt;td&gt;7&lt;/td&gt;
        &lt;td&gt;11&lt;/td&gt;
        &lt;td&gt;8&lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;6&lt;/td&gt;
        &lt;td&gt;20&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;Junior Technical Author&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td&gt;26&lt;/td&gt;
        &lt;td&gt;9&lt;/td&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;19&lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;6&lt;/td&gt;
        &lt;td&gt;20&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>