부트 스트랩을 사용하여 두 rowspan을 사용하여 테이블에서 텍스트를 회전하는 방법

좋아요, 테이블에서 텍스트를 회전시키기 위해 HTML 코드를 작동 시키는데 시간이 많이 걸렸습니다. 그러나 나던 한 것 같습니다. 누군가가 나를 도울 의향이 있다면 여기부트 스트랩을 사용하여 두 rowspan을 사용하여 테이블에서 텍스트를 회전하는 방법

이 jsfiddle, 나는

여기 https://jsfiddle.net/zmxr9kyh/

내 HTML 코드는

$(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>

출처

2016-10-09 Billy Origin