Datatable bootstrap align rotate header

I need help to align the header label to bottom center like this.

This is what I have right now:

HTML

<div class="container">      <table id="example" class="table table-bordered table-small-font table-striped table-hover" cellspacing="0" width="100%">          <thead>              <tr>                  <th class="vert-align" rowspan="3">NUM.</th>                  <th class="vert-align text-center" rowspan="3">DEPARTMENT</th>                  <th class="vert-align text-center sum_currency" colspan="2">EXPENDITURE</th>                  <th colspan="4" class="vert-align text-center">DISPOSE BUILDING STRUCTURE/ BUILDING COMPONENT</th>                  <th colspan="4" class="vert-align text-center">LAND DISPOSAL/ BUILDING/ INFRASTRUCTURE</th>                  <th colspan="10" class="vert-align text-center">DISPOSE METHOD</th>              </tr>              <tr>                  <th rowspan="2" class="vert-align text-center">ALLOCATION</th>                  <th rowspan="2" class="vert-align text-center">EXPENDITURE PROGRESS %</th>                  <th colspan="2" class="vert-align text-center">COUNT</th>                  <th colspan="2" class="vert-align text-center">CURRENT VALUE</th>                  <th colspan="2" class="vert-align text-center">COUNT</th>                  <th colspan="2" class="vert-align text-center">CURRENT VALUE</th>                  <th colspan="5" class="vert-align text-center">BUILDING STRUCTURE COUNT/ BUILDING COMPONENT                  <th colspan="5" class="vert-align text-center">COUNT LAND/BUILDING/INFRASTRUCTURE</th>              </tr>              <tr>                  <th class="rotated-text"><div><span>ESTIMATE</span></div></th>                  <th class="rotated-text"><div><span>EXACT</span></div></th>                  <th class="rotated-text"><div><span>ESTIMATE</span></div></th>                  <th class="rotated-text"><div><span>EXACT</span></div></th>                  <th class="rotated-text"><div><span>ESTIMATE</span></div></th>                  <th class="rotated-text"><div><span>EXACT</span></div></th>                  <th class="rotated-text"><div><span>ESTIMATE</span></div></th>                  <th class="rotated-text"><div><span>EXACT</span></div></th>                  <th class="rotated-text"><div><span>DEMOLISH</span></div></th>                  <th class="rotated-text"><div><span>SALE</span></div></th>                  <th class="rotated-text"><div><span>TRANSFER</span></div></th>                  <th class="rotated-text"><div><span>GIFT</span></div></th>                  <th class="rotated-text"><div><span>BARTER</span></div></th>                  <th class="rotated-text"><div><span>OWNERSHIP <br>TRANSFER</span></div></th>                  <th class="rotated-text"><div><span>RELEASE</span></div></th>                  <th class="rotated-text"><div><span>RETURN OF <br>OWNERSHIP</span></div></th>                  <th class="rotated-text"><div><span>LEASE</span></div></th>                  <th class="rotated-text"><div><span>CHANGE OF USE</span></div></th>              </tr>              <tfoot>                  <tr>                      <th class="text-center expand" colspan="2">TOTAL</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                      <th class="text-right">&nbsp;</th>                  </tr>              </tfoot>          </thead>      </table>  </div>  

CSS

.table>thead>tr>th {    background-color: lightgoldenrodyellow;  }    .table>thead>tr>th.vert-align {    vertical-align: middle;  }    th.rotated-text {      height: 140px;      white-space: nowrap;      padding: 0 !important;  }    th.rotated-text > div {      transform:rotate(-90deg);      width: 30px;  }    th.rotated-text > div > span {      padding: 0px 15px;  }  

Javascript

$(document).ready(function() {      $('#example').DataTable( {           responsive: true,           dom: 'Bfrtip',           "bSort": false,      buttons: [          'copy', 'excel', 'pdf', 'csv'      ]  } );              } );  

jsfiddle : https://jsfiddle.net/64adk8gr/

full view : https://jsfiddle.net/64adk8gr/show

Please assist me. Thanks in advance.

https://stackoverflow.com/questions/67277355/datatable-bootstrap-align-rotate-header April 27, 2021 at 01:18PM