The width of the DataTables table header is not aligned because the table is hidden in a tab

I already tried with .columns.adjust (); with width = "100%" and neither of the 2 ways it works but when I click to sort the table or open the google inspector it works. Can someone help me please I would appreciate it

$(document).ready(function(){
    var url = document.URL;
    id_hv = url.split("=");
    var table_mov = $('#tabla_movimientos').DataTable( {
        language: {
            "decimal": "",
            "emptyTable": "No hay información",
            "info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
            "infoEmpty": "Mostrando del 0 al 0 de 0 registros",
            "infoFiltered": "(Filtrado de _MAX_ total registros)",
            "infoPostFix": "",
            "thousands": ",",
            "lengthMenu": "Mostrar _MENU_ registros",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "zeroRecords": "Sin resultados encontrados",
            "paginate": {
                "first": "Primero",
                "last": "Ultimo",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        scrollY:        '30vh',
        scrollCollapse: true,
        paging:         true,
        "ajax": 'mostrar_tabla.php?tabla=movimientos&id_hv='+id_hv[1]+'',
        "columns": [     // <-- Columnas como se encuentran la base de datos
        { data: 'id_mov'  },
        { data: 'id_hv'  },
        { data: 'fecha_mov' },
        { data: 'sede_anterior' },
        { data: 'sede_actual'  },
        { data: 'nombre'  }

        ],

        orderCellsTop: true,
        fixedHeader: true
    });
});

This is the part where I hide and show the tabcontent

function equipo(evt, modulo)
{
    var head;
    head = document.getElementsByClassName("head");

    if (modulo == 'datos')
    {
        head[0].style.display = 'block';
    }else{
        head[0].style.display = 'none';
    }
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++)
    {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++)
    {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(modulo).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

and this is my table inside the hidden tabcontent

<div id="movimientos" class="tabcontent">
            <h3>Movimientos</h3>
            <div class="contenedor">
                <section class="tabla">
                    <div class="table-responsive">
                        <table id="tabla_movimientos" class="table table-hover table-bordered table-sm" style="width:100%" >
                            <thead>
                                <tr>
                                    <th>ID MOV</th>
                                    <th>ID HV</th>
                                    <th>FECHA MOV</th>
                                    <th>SEDE ANT</th>
                                    <th>SEDE ACT</th>
                                    <th>USUARIO</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </section>
            </div>
        </div>