How to rotate text on table with two rowspan using bootstrap - html

Question

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
https://jsfiddle.net/zmxr9kyh/
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"> </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> </th>
<th> </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>

Answer 1

writing-mode is your friend:
th span {
writing-mode: tb-rl;
}
You might have to add vendor prefixes.
Updated JSFiddle
More information
Browser support of writing-mode