用于 Bootstrap 的表格上的 HTML 垂直文本

Question

如何使用 bootstrap 在具有固定和长文本的表格上制作垂直文本？我对带有 Bootstrap 的表格上的垂直文本有疑问。我想知道为什么我的代码不起作用，以及使它起作用的正确方法是什么。

我的 table 是这样的

这是我的 HTML 代码:

<table class="table table-bordered table-hover table-condensed" align="center">
                <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 class="vertical" rowspan="2"><div class="vertical">IDENTITAS MAHASISWA</div></th>
                      <th  rowspan="2"><center>%</center></th>
                      <th  rowspan="2"><center>MAHASISWA PT</center></th>
                      <th  rowspan="2"><center>%</center></th>
                      <th  rowspan="2"><center>KURIKULUM</center></th>
                      <th  rowspan="2"><center>%</center></th>
                      <th  rowspan="2"><center>NILAI</center></th>
                      <th rowspan="2"><center>%</center></th>
                      <th  rowspan="2"><center>AKM</center></th>
                      <th  rowspan="2"><center>%</center></th>
                      <th  rowspan="2"><center>DAYA TAMPUNG</center></th>
                      <th  rowspan="2"><center>%</center></th>
                      <th  style="border-bottom-color:#FFFFFF">LAPORAN</th>
                      <th colspan="3" align="center"><center>MHS</center></th>
                      <th  style="border-bottom-color:#FFFFFF"><center>
                        KELAS 
                      </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>KULIAH</center></th>
                  </tr>
                </thead>

这是我正在使用的 CSS 代码

div.vertical
{
 margin-left: -85px;
 position: absolute;
 width: auto;
 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
{
 height: 150px;
 line-height: 14px;
 padding-bottom: 20px;
 text-align: left;

}

Answer 1

table {
  border:1px solid black;
}
table th {
  border-bottom:1px solid black;
}


th.rotate {
  height:80px;
  white-space: nowrap;
  position:relative;
}

th.rotate > div {
  transform: rotate(90deg);
  position:absolute;
  left:0;
  right:0;
  top: 10px;
  margin:auto;
  
}

<table>
  <tr>
    <th class="rotate">
      <div><span>Column 1</span></div>
    </th>
    <th class="rotate">
      <div><span>Column 2</span></div>
    </th>
    <th class="rotate">
      <div><span>Column 3</span></div>
    </th>
  </tr>
  <tr>
    <td>col</td>
    <td>col</td>
    <td>col</td>
  </tr>
</table>