The columns of my table do not have the proper width when I use the scrollX in my datatable

Question

I am loading my datatable with ajax but the data in the columns is not being arranged correctly. Attached my code and photos of the problem.

datatable libraries

<link rel="stylesheet" href="{% static 'lib/datatables-1.10.25/css/dataTables.bootstrap4.min.css' %}"/>
<link rel="stylesheet" href="{% static 'lib/datatables-1.10.25/plugins/fixedcolumns-4.0.1/css/fixedColumns.bootstrap4.css' %}"/>
<link rel="stylesheet" href="{% static 'lib/datatables-1.10.25/plugins/responsive-2.2.9/css/responsive.bootstrap4.min.css' %}"/>
<script src="{% static 'lib/datatables-1.10.25/js/jquery.dataTables.js' %}"></script>
<script src="{% static 'lib/datatables-1.10.25/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'lib/datatables-1.10.25/plugins/responsive-2.2.9/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'lib/datatables-1.10.25/plugins/responsive-2.2.9/js/responsive.bootstrap4.min.js' %}"></script>
<script src="{% static 'lib/datatables-1.10.25/plugins/fixedcolumns-4.0.1/js/fixedColumns.bootstrap4.js' %}"></script>

my table in html

<table style="width:100%" class="table table-bordered table-striped display nowrap" id="data">
                        <thead>
                        <tr>
                            <th>Número</th>
    <th>Fecha de registro</th>
    <th>Hora de registro</th>
    <th>Medio</th>
    <th>Referencia</th>
    <th>Proceso</th>
    <th>Parametros</th>
    <th>Respuesta</th>
    <th>Resuspensión</th>
    <th>Estado</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

El code of my datatable

 tblSuspension = $('#data').DataTable({
                destroy: true,
                deferRender: true,
                scrollX: true,
                fixedColumns: true,
                ajax: {
                    url: pathname,
                    type: 'POST',
                    headers: {
                        'X-CSRFToken': csrftoken
                    },
                    data: parameters,
                    dataSrc: "",
                    beforeSend: function () {
                        loading_message('...');
                    },
                    complete: function () {
                        $.LoadingOverlay("hide");
                    }
                },
                columns: [
                    {data: "id"},
                    {data: "date_joined"},
                    {data: "time_joined"},
                    {data: "medium.name"},
                    {data: "reference"},
                    {data: "process.name"},
                    {data: "parameters"},
                    {data: "response"},
                    {data: "id"},
                    {data: "id"},
                ],
                columnDefs: [
                    {
                        targets: [-4],
                        class: 'text-center',
                        render: function (data, type, row) {
                            return '<a class="btn btn-warning btn-xs btn-flat" rel="parameters"><i class="fas fa-align-justify"></i></a>';
                        }
                    },
                    {
                        targets: [-3],
                        class: 'text-center',
                        render: function (data, type, row) {
                            return '<a class="btn btn-success btn-xs btn-flat" rel="response"><i class="fas fa-align-justify"></i></a>';
                        }
                    },
                    {
                        targets: [-2],
                        class: 'text-center',
                        render: function (data, type, row) {
                            return '<a class="badge badge-secondary badge-pill cursor-pointer" rel="resuspension">' + row.resuspension.length + '</a>';
                        }
                    },
                    {
                        targets: [-1],
                        class: 'text-center',
                        render: function (data, type, row) {
                            if (row.state) {
                                return '<span class="badge badge-success">Success</span>';
                            }
                            return '<span class="badge badge-danger">Error</span>';
                        }
                    },
                ],
                rowCallback: function (row, data, index) {
    
                },
                initComplete: function (settings, json) {
    
                }
            });

When executed it gives me this as a result.

The funny thing is that I put a button to call the event that loads the table again and when I execute it, it works.

The same thing happens to me when I execute in a modal I get something like this.

But when I click on a column, the width is fixed and it gives me the result like this.

I have also tried using the .columns.adjust() and .responsive.recalc(); but it hasn't worked either.