html - 如何使用 Bootstrap 在具有两个行跨度的表上旋转文本

Question

好吧，我已经尝试了几个小时让我的 HTML 代码可以在我的 table 上旋转文本，但似乎没有用。

这里是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>

Answer 1

writing-mode 是你的 friend :

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

您可能必须添加供应商前缀。

• > Updated JSFiddle
• > More information
• > Browser support of writing-mode