How to rotate text on table with two rowspan using bootstrap

ok, i've been trying hours to make my HTML code working for rotating text on my table, but doesnt seem to work.

here is jsfiddle, if anyone is willing to help me, I will appreciate that

here my html code

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

  $('table th').height(header_height);
});

th {
  position: relative;
  padding: 10px;
}
th span {
  bottom: 0;
  display: inline-table;
  left: 50%;
  position: absolute;
  transform: rotate(-90deg);
  transform-origin: 0 50% 0;
  white-space: pre;
  width: 100;
  margin-left: auto;
  margin-bottom: -110;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-condensed" align="center" border='1'>

  <thead>
    <tr>
      <th style="border-bottom-color:#FFFFFF">&nbsp;</th>

      <th style="border-bottom-color:#FFFFFF">

      </th>
      <th colspan="12" align="center">
        <center>VALIDASI</center>
      </th>
      <th style="border-bottom-color:#FFFFFF">
        <center></center>
      </th>
      <th colspan="6" align="center">
        <center>JUMLAH RECORD</center>
      </th>
    </tr>
    <tr align="center">
      <th style="border-bottom-color:#FFFFFF">NO.</th>
      <th style="border-bottom-color:#FFFFFF">PROGRAM STUDI</th>
      <th rowspan="2"><span>IDENTITAS MAHASISWA</span>
      </th>
      <th rowspan="2">
        <center>%</center>
      </th>
      <th rowspan="2"><span>MAHASISWA PT</span>
      </th>
      <th rowspan="2">
        <center>%</center>
      </th>
      <th rowspan="2"><span>KURIKULUM</span>
      </th>
      <th rowspan="2">
        <center>%</center>
      </th>
      <th rowspan="2"><span>NILAI</span>
      </th>
      <th rowspan="2">
        <center>%</center>
      </th>
      <th rowspan="2"><span>AKM</span>
      </th>
      <th rowspan="2">
        <center>%</center>
      </th>
      <th rowspan="2"><span>DAYA TAMPUNG</span>
      </th>
      <th rowspan="2">
        <center>%</center>
      </th>
      <th style="border-bottom-color:#FFFFFF"><span>LAPORAN %</span>
      </th>
      <th colspan="3" align="center">
        <center>MHS</center>
      </th>
      <th style="border-bottom-color:#FFFFFF">
        <center>
          KELAS KKULIAH
        </center>
      </th>
      <th rowspan="2">
        <center>NILAI</center>
      </th>
      <th rowspan="2">
        <center>AKM</center>
      </th>
    </tr>
    <tr align="center">
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>
        <center></center>
      </th>
      <th>
        <center>A</center>
      </th>
      <th>
        <center>C</center>
      </th>
      <th>
        <center>N</center>
      </th>
      <th>
        <center></center>
      </th>
    </tr>
  </thead>


</table>

Solution

writing-mode is your friend:

th span {
  writing-mode: tb-rl;
}

You might have to add vendor prefixes.