90 degree text rotation in a table

Question

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.

.vertical-th {
  transform: rotate(-90deg);
}

<table>
  <tr>
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th>
    <th class="risk-th" style="width: 4%">
      <!--Manuality-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Probability-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Gravity-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Mitigation-->
    </th>

    <th colspan="3"></th>
    <th class="vertical-th">Manuality</th>
    <th class="vertical-th">Probability</th>
    <th class="vertical-th">Gravity</th>
    <th class="vertical-th">Mitigation</th>

  </tr>
</table>

Answer 1

Simple and easy way to create rotational table header by using below concept.

$(function() {
    var header_height = 0;
    $('.rotate-table-grid th span').each(function() {
        if ($(this).outerWidth() > header_height) header_height = $(this).outerWidth();
    });

    $('.rotate-table-grid th').height(header_height);
});

table.rotate-table-grid{box-sizing: border-box;
border-collapse: collapse;}
 .rotate-table-grid tr, .rotate-table-grid td, .rotate-table-grid th {
  border: 1px solid #ddd;
  position: relative;
  padding: 10px;
}
.rotate-table-grid th span {
  transform-origin: 0 50%;
  transform: rotate(-90deg); 
  white-space: nowrap; 
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rotate-table-grid">
  <thead>
      <tr>
          <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
           <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
           <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
           <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
      </tr>
</thead>
<tbody>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
     <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
         <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
     <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
     <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</tbody>
</table>