Столбцы моей таблицы не имеют правильной ширины, когда я использую scrollX в моей таблице данных

Я загружаю свою таблицу данных с помощью ajax, но данные в колонках располагаются неправильно. Во вложении мой код и фотографии проблемы.

датируемые библиотеки

<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>

моя таблица в 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>

Эл код моей таблицы данных

При выполнении он дает мне следующее в качестве результата.

Забавно то, что я поместил кнопку для вызова события, которое снова загружает таблицу, и когда я выполняю его, оно работает.

То же самое происходит со мной, когда я выполняю в модальном окне, я получаю что-то вроде этого.

Но когда я нажимаю на колонку, ширина фиксируется, и это дает мне такой результат.

Я также пробовал использовать .columns.adjust() и .responsive.recalc(); но это тоже не сработало.

Вернуться на верх