DataTables FixedHeader Column Width Bug

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
<div class="container-fluid">
  <table id="table_dt" class="w-100 table table-sm table-bordered table-striped">
    <thead>
      <tr>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
        <td><input class="form-control form-control-sm" type="text" placeholder="Test"></td>
      </tr>
      <tr>
        <th>Test</th>
        <th>Test</th>
       ...

JavaScript

$(function() {
  var displayLength = -1;
  if (/Trident/i.test(navigator.userAgent) || /MSIE/i.test(navigator.userAgent)) {
    displayLength = 100;
  }


  // DataTables
  var table = $('#table_dt').DataTable({
    iDisplayLength: displayLength,
    aLengthMenu: [
      [10, 25, 50, 100, -1],
      [10, 25, 50, 100, 'All']
    ],
    order: [
      [6, 'asc']
    ],
    fixedHeader: true
  });

  // Suche pro Spalte
  $('#table_dt thead input').on('keyup change', function() {
    table
      .column($(this).parent().index() + ':visible')
      .search(this.value)
      .draw();
  });
});