DataTables - FixedColumns

by Colin Marks

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9,fc-3.1.0/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9,fc-3.1.0/datatables.min.js"></script>
 <table id="compareResults">
 <thead>
 <tr>
 <th rowspan="2">Country Name</th>
 <th rowspan="2">Format</th>
 <th rowspan="2">Service Level</th>
 <th rowspan="2">Selected</th>
 <th rowspan="2">Benchmark</th>
 <th colspan="21" style="text-align:center;">Best for weight band</th>
 </tr>
 <tr>
 <th>19</th>
 <th>20</th>
 <th>50</th>
 <th>59</th>
 <th>75</th>
 <th>99</th>
 <th>100</th>
 <th>149</th>
 <th>150</th>
 <th>199</th>
 <th>200</th>
 <th>249</th>
 <th>250</th>
 <th>500</th>
 <th>1000</th>
 <th>1500</th>
 <th>2000</th>
 <th>3000</th>
 <th>4000</th>
 <th>5000</th>
 <th>20000</th>
 
 </tr>
 </thead>
 <tbody></tbody>
 </table>

CSS

table#mainDataTable{
       margin-left: 300px !important; 
 }


 div.DTFC_ScrollWrapper div.dataTables_scroll div.dataTables_scrollBody{
       padding-left: -300px;
       left: 450px; 
 }

 div.DTFC_ScrollWrapper div.DTFC_LeftWrapper div.DTFC_LeftBodyWrapper{
       z-index: 1;
 }

JavaScript

$(document).ready(function () {
 $('#compareResults').DataTable({
 paging: false,
 ordering: false,
 info: false,
 scrollX: true,
 fixedColumns: {
 leftColumns: 5,
 rightColumns: 0
 }
 });
 });