Datatables Column Header not aligned (IE11)
by Redburn
HTML
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">
<table id="example" class="diplay cell-border">
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Value (in Mio EUR)</th>
<th rowspan="2">Chg. Value vs. Year Ago (in Mio EUR)</th>
<th rowspan="2">% Chg. Value vs. Year Ago</th>
<th colspan="2">Weight. Distr.</th>
<th colspan="2">Rate of Sales in Value (4w) (in EUR)</th>
<th colspan="2">No. of Items per Store</th>
<th colspan="2">Importance of Sales Value under Promotion (in %)</th>
</tr>
<tr>
<th>Last</th>
<th>Pts Ev.</th>
<th>Last</th>
<th>% Ev.</th>
<th>Last</th>
<th>% Ev.</th>
<th>Last</th>
<th>Pts Ev.</th>
</tr>
</thead>
<tbody>
<tr>
<td>ITM DATASHARING P&G LOT 1</td>
<td>38.72</td>
<td>-4.92</td>
<td>-11.29</td>
<td>100</td>
<td>0</td>
<td>1768.93</td>
<td>-11.32</td>
<td>190.34</td>
<td>-3.07</td>
<td>17.57</td>
<td>-1.57</td>
</tr>
<tr>
<td>071 LAVAGE DU LINGE ASSOUPLISSANT</td>
<td>1.90</td>
<td>0.54</td>
<td>40.65</td>
<td>99.96</td>
<td>0.24</td>
<td>86.90</td>
<td>40.24</td>
<td>10.91</td>
<td>16.83</td>
<td>41.94</td>
<td>23.67</td>
</tr>
<tr>
<td>071 LAVAGE DU LINGE AUXILIAIRES DE LAVAGE</td>
<td>0.22</td>
<td>-0.04</td>
<td>-17.58</td>
<td>99.57</td>
<td>0.04</td>
<td>10.38</td>
<td>-17.64</td>
<td>2.71</td>
<td>-3.12</td>
...
JavaScript
$('#example').DataTable({
scrollY: 300,
scrollX: '100%',
fixedColumns: {
leftColumns: 1,
rightColumns: 0,
}
});