Best Data Table

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css">
<script src="//cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<script src="https://nightly.datatables.net/responsive/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://nightly.datatables.net/responsive/css/responsive.dataTables.min.css">
<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"...

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