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>

Solution 1

We can do some CSS tricks by warping headers text inside DIV's and applying some rules on th and the DIV's inside it, then we can get more styling ability then we can shorten the width of header even if text is long.

Some thing like: I hope it helps for you, Thanks

th, td, table{
  border:solid 1px;
}

div.vertical{
  position: absolute;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); /* Safari/Chrome */
  -moz-transform: rotate(-90deg);    /* Firefox */
  -o-transform: rotate(-90deg);      /* Opera */
  -ms-transform: rotate(-90deg);     /* IE 9 */
}

th.vertical{
  max-width: 50px;
  height: 85px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: inherit;
}

<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 class="vertical"><div class="vertical">Manuality</div></th>
    <th class="vertical"><div class="vertical">Probability</div></th>
    <th class="vertical"><div class="vertical">Gravity</div></th>
    <th class="vertical"><div class="vertical">Mitigation</div></th>
  </tr>
</table>

Solution 2

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>

Solution 3

<table border="1">
  <tr>
     <th style="transform: rotate(-90deg);width: 1px;padding: 10px;" className="rotateth">head 1</th>
     <th>head 2</th>
     <th>head 3</th>
     <th>head 4</th>
  </tr>
  <tr>
     <td>data 1</td>
     <td>data 2</td>
     <td>data 3</td>
     <td>data 4</td>
  </tr>
</table>

Comments

[Gertjan Gielen]

Omg, been trying this in combination width bootstrap for 2 days. This is the best answer when using bootstrap and nowrap of cells.

[SantoshK]

Thanks @Gulpener for your feedback... and i hope you will promote this solution among people -:)

[David Buck]

When answering an old question, your answer would be much more useful to other StackOverflow users if you included some context to explain how your answer helps, particularly for a question that already has an accepted answer. See: How do I write a good answer.