My html table contain two header rows as below. I want to make quarter column fixed I tried an example in jquery datatable plugin but it is not working as I expexted. The table is convered to a datatable but first column is not fixed
Example i tried https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
HTML
<table id="example" class="table table-stripped">
<thead>
<tr>
<th rowspan="2">Quarter</th>
<th colspan="10">ICT Sector</th>
<th colspan="10">Shipping</th>
</tr>
<tr>
<th>WSO2</th>
<th>IFS</th>
<th>Company A</th>
<th>Company B</th>
<th>Company C</th>
<th>Company D</th>
<th>Company E</th>
<th>Company F</th>
<th>Company G</th>
<th>Company H</th>
<th>PSA</th>
<th>Mercantile Shipping</th>
<th>Company A</th>
<th>Company B</th>
<th>Company C</th>
<th>Company D</th>
<th>Company E</th>
<th>Company F</th>
<th>Company G</th>
<th>Company H</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quater 1</td>
<td>100</td>
<td>700</td>
<td>800</td>
<td>900</td>
<td>1100</td>
<td>2200</td>
<td>7821</td>
<td>8862</td>
<td>6231</td>
<td>5891</td>
<td>100</td>
<td>700</td>
<td>800</td>
<td>900</td>
<td>1100</td>
<td>2200</td>
<td>7821</td>
<td>8862</td>
<td>6231</td>
<td>5891</td>
</tr>
<tr>
<td>Quater 1</td>
<td>100</td>
<td>700</td>
<td>800</td>
<td>900</td>
<td>1100</td>
<td>2200</td>
<td>7821</td>
<td>8862</td>
<td>6231</td>
<td>5891</td>
<td>100</td>
<td>700</td>
<td>800</td>
<td>900</td>
<td>1100</td>
<td>2200</td>
<td>7821</td>
<td>8862</td>
<td>6231</td>
<td>5891</td>
</tr>
</tbody>
</table>
Javascript
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1
}
} );
} );
