JQuery datatables colspan
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="reportTable0" border="0" class="table" cellspacing="1" cellpadding="0">
<thead>
<tr class="headerRow">
<th rowspan="1" colspan="2" class="dim_ctg sorting">
Measure
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 1 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 2 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 3 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 4 </div>
</th>
<th nowrap="" class="dim_ctg">
<div class="th-inner sortable both">
<span class="modal-trigger" data-toggle="modal" data-target="#' + modal3Id + '">AVG</span>
</div>
</th>
</tr>
<!-- <tr class="headerRow secondHeader">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr> -->
</thead>
<tbody>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_1 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">77.64</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">76.33</div>
</td>
<td...
CSS
/* .headerRow th {
border: 0 !important;
}
.headerRow.secondHeader th {
padding: 8px !important;
position: relative;
top: -20px;
} */
JavaScript
var options = {
sDom: 'rt'
};
$('#reportTable0').DataTable(options);