Billy Origin Billy Origin - 1 month ago 8
CSS Question

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

https://jsfiddle.net/zmxr9kyh/

here my html code

<table class="table table-bordered table-hover table-condensed" align="center" border='1'>

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




</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>


here my css

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;
}


here my script

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

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

Answer

writing-mode is your friend:

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

You might have to add vendor prefixes.