How to adjust the width of the jquery datatable to larger resolution screens

Question

I’m having trouble displaying my datatable (empty) on screens with higher resolutions. I’ve tried using the class table-responsive-lg, but it hinders the responsiveness applied by the class table-responsive, I mean, I can’t wear both at the same time.

The class table-responsive makes the datatable not exceed the limits of the page width, as it creates a scrollbar. If in place of the class table-responsive I use the class table-responsive-lg, fix the problem, but then, at certain times when I open the page with smaller resolutions, the datatable jumps out and exceeds the width of the page. So I abandoned the idea of using class table-responsive-lg.

Someone knows how to help me?

<table id="dtFinanceiroIndex" class="table-responsive table table-striped table-bordered center-header table-vcenter" cellspacing="0" style=" width: 100% !important;">
    <thead class="bg-blue-grey-100">
        <tr>
            <th>
                <span class="checkbox-custom checkbox-default">
                    <input id="dt-financeiro-selectable-all" class="selectable-all" type="checkbox">
                    <label></label>
                </span>
            </th>
            <th>
                Tipo de Controle Financeiro
            </th>
            <th>
                Núm. do Documento
            </th>
            <th>
                Valor do Documento
            </th>
            <th>
                Cliente/Fornecedor
            </th>
            <th>
                Situação
            </th>
            <th>
                Ações
            </th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Answer 1

https://datatables.net/reference/api/columns.adjust()

Ex:

var table = $('#example').DataTable( ... );

setTimeout(function(){
   table.columns.adjust().draw();
},2000)