Datatable не полная ширина

Question

У меня есть 3 навигационных экрана, каждый из которых включает в себя различные таблицы, работающие с таблицами данных, но во втором и третьем навигационных документах мои таблицы не имеют полной ширины. Я также попробовал некоторые решения здесь , но не повезло.

Скриншоты

first tab

seond tab

код

<link href="{{ asset('css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
<script defer>
    $(document).ready(function() {
        $('.example').DataTable({
            responsive: true,
            "aaSorting": [[ 0, "desc" ]],
            dom: "<'row'<'col-sm-6'l><'col-sm-6 float-right'f><'col-sm-12 mb-3 d-flex justify-content-center'p>>" +
            "<'row'<'col-md-12'tr>>" +
            "<'row'<'col-sm-5 mt-3'i><'col-sm-7'p>>",
        });
    });
</script>

{{-- trying to solve the width issue (testing) --}}
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
});
</script>

Есть идеи?

Answer 1

Этот работает для меня.

<style>
    div#DataTables_Table_0_wrapper {
        width: 100% !important;
    }
</style>