title: 90 degree text rotation in a table
body: <p>I am trying to align text in the top row of a table so that it displays vertically using the rotate transform function.  Although i successfully rotate the word in the table header, i am unable to shorten the width of the table column to be the same width of the rotated title.  (It stays the same width of the title if it were to have been layed out horizontally).  Also, I am using percentages to indicate column width.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.vertical-th {
    transform: rotate(-90deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th colspan="3" class="text-center risk-th" style="width: 20%"&gt;Controls&lt;/th&gt;
      &lt;th class="risk-th" style="width: 4%"&gt;
        &lt;!--Manuality--&gt;
      &lt;/th&gt;
      &lt;th class="risk-th" style="width: 4%"&gt;
        &lt;!--Probability--&gt;
      &lt;/th&gt;
      &lt;th class="risk-th" style="width: 4%"&gt;
        &lt;!--Gravity--&gt;
      &lt;/th&gt;
      &lt;th class="risk-th" style="width: 4%"&gt;
        &lt;!--Mitigation--&gt;
      &lt;/th&gt;
  
      &lt;th colspan="3"&gt;&lt;/th&gt;
      &lt;th class="vertical-th"&gt;Manuality&lt;/th&gt;
      &lt;th class="vertical-th"&gt;Probability&lt;/th&gt;
      &lt;th class="vertical-th"&gt;Gravity&lt;/th&gt;
      &lt;th class="vertical-th"&gt;Mitigation&lt;/th&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>