数据表：标题和正文未对齐

Question

我有一个选择组合框来显示/隐藏有DataTable的div。问题是当显示div时，DataTable标头和主体未对齐。使用php从数据库填充DataTable。

更新

  

如果在加载页面时未隐藏div，则将加载数据表   对齐。当它被隐藏并通过使用   选择组合框。

代码：

<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
  <thead>
   <tr>
    <th>Código<i class="fa fa-sort"></i></th>
    <th>Producto<i class="fa fa-sort"></i></th>
    <th>% Exo.<i class="fa fa-sort"></i></th>
  </tr>
  </thead>
  <tbody>

  </tbody>
  <tfoot>
  </tfoot>
</table> 


<script>

$(document).ready(function(){

   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();

  $.noConflict(true);
  //cambiar idioma de Tabla

    $('#dtBasicExample').DataTable({
            "scrollX": true,
            "order": [[1, "asc"]],
            "language":{
                "lengthMenu": "Mostrar _MENU_ registros por pagina",
                "info": "Mostrando pagina _PAGE_ de _PAGES_",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtrada de _MAX_ registros)",
                "loadingRecords": "Cargando...",
                "processing":     "Procesando...",
                "search": "Buscar:",
                "zeroRecords":    "No se encontraron registros coincidentes",
                "paginate": {
                    "next":       "Siguiente",
                    "previous":   "Anterior"
                },                  
            }
        });

    $('.dataTables_length').addClass('bs-select');

});

</script>

输出