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">
<div id="click" class="small">Click Me</div>

<table id="example" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
    </tr>
  </tbody>
</table>

CSS

#click.small {
  height: auto;
}

#click {
  cursor: pointer;
  height: 100px;
  display: block;
  background-color: red;
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
    fixedHeader: true
  });
  
  $('#click').click(function() {
  	$(this).toggleClass('small');
    table.fixedHeader.adjust();
  })
});