OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to rotate text on table with two rowspan using bootstrap

  • Thread starter Thread starter Billy Adelphia
  • Start date Start date
B

Billy Adelphia

Guest
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


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

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

Code:
<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>
<p>ok, i've been trying hours to make my HTML code working for rotating text on my table, but doesnt seem to work.</p>

<p>here is jsfiddle, if anyone is willing to help me, I will appreciate that</p>

<p><a href="https://jsfiddle.net/zmxr9kyh/" rel="nofollow">https://jsfiddle.net/zmxr9kyh/</a></p>

<p>here my html code</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre>
</div>
</div>
</p>
Continue reading...
 

Latest posts

Online statistics

Members online
0
Guests online
3
Total visitors
3
Ads by Eonads
Top