title: Rotating table header when using twitter bootstrap tables
body: <p>I have managed to to rotate the header of a column on a table as such I am still getting the following problem:</p>
  
  <p><img src="https://i.stack.imgur.com/SVoZd.png" alt="enter image description here"></p>
  
  <p>Here is my HTML and CSS:</p>
  
  <pre><code>  .box_rotate 
              {
                   -moz-transform: rotate(-90deg);  /* FF3.5+ */
                     -o-transform: rotate(-90deg);  /* Opera 10.5 */
                -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
                           filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
                       -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
              }
  
  &lt;table class="table table-bordered"&gt;
          &lt;tr style="height:5%;"&gt;&lt;th style="width:2.5%"&gt;#&lt;/th&gt;&lt;th style="width:25%;"&gt;Task&lt;/th&gt;&lt;th&gt;Progress&lt;/th&gt;&lt;th&gt;&lt;div class="box_rotate" style="height:10%;"&gt;Start Time&lt;/div&gt;&lt;/th&gt;&lt;th&gt;End Time&lt;/th&gt;&lt;th style="width:2.5%"&gt;1&lt;/th&gt;&lt;th style="width:2.5%"&gt;2&lt;/th&gt;&lt;th style="width:2.5%"&gt;3&lt;/th&gt;&lt;th style="width:2.5%"&gt;4&lt;/th&gt;&lt;th style="width:2.5%"&gt;5&lt;/th&gt;&lt;th style="width:2.5%"&gt;6&lt;/th&gt;&lt;th style="width:2.5%"&gt;7&lt;/th&gt;&lt;th style="width:2.5%"&gt;8&lt;/th&gt;&lt;th style="width:2.5%"&gt;9&lt;/th&gt;&lt;th style="width:2.5%"&gt;10&lt;/th&gt;&lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>I've tried trying to change the row and columns height to see if the words would fit into the column but I haven't had any luck. Any ideas?</p>