Datatables FixedHeader Defect
HTML
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.1/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.1/css/fixedHeader.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>1</th>
<th colspan="2">2 & 3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start<br/></br/>date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
...
CSS
/* Code provided by tonyiecla here: https://datatables.net/forums/discussion/comment/158277/#Comment_158277 */
.fixedHeader-floating>thead>tr>th {
/* Solves the issue, but causes a th height mismatch for multi-line th
display: inline-block !important;
*/
}
th {
line-height: 0.7;
}
th, td {
border: 1px solid;
}
JavaScript
$(document).ready(function() {
$('#example').DataTable({
fixedHeader: true,
paging: false,
});
});