Я использую Jquery datatables для отображения некоторых данных, но у меня есть проблема, при изменении размера она не подходит для родительского контейнера. Я заметил, что когда я сохранил свой код и перезагрузил страницу, размер данных корректно изменился, но если я снова перезагрузил, таблица данных вышла за пределы его родительского контейнера, который является панелью вкладок, я не знаю, что вызывает эту проблему. Я использую AdminLTE в качестве моего шаблона администратора. 
Мой код
<!-- Modulo para Citas ¡-->
<div class="tab-pane fade" id="custom-tabs-two-messages" role="tabpanel" aria-labelledby="custom-tabs-two-messages-tab">
<div class="row">
<div class="col-12">
<div class="card-body">
<table id="citas_table" class="table table-bordered table-striped">
<thead>
<tr>
<th>Nº Cita</th>
<th>Fecha Cita</th>
<th>Hora Cita</th>
<th>Agendada por</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
@foreach ($paciente->citas as $key=>$cita)
<tr>
<td>{{ $key + 1 }}</td>
<td>{{ Carbon\Carbon::parse($cita->start)->format('d-m-Y') }}</td>
<td>{{ Carbon\Carbon::parse($cita->start)->format('h:i A') }}</td>
<td>{{ $cita->user->name }}</td>
<td class="text-center">
@switch($cita->status)
@case(0)
<span class="badge badge-warning">Pendiente</span>
@break
@case(1)
<span class="badge badge-success">Realizada</span>
@break
@case(2)
<span class="badge badge-danger">Cancelada</span>
@break
@default
@endswitch
</td>
<td class="text-center">
<button class="btn btn-success"><i class="fas fa-edit"></i></button>
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>Nº Cita</th>
<th>Fecha Cita</th>
<th>Hora Cita</th>
<th>Agendada por</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
CSS
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
JS
<!-- DataTables -->
<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script>
$(function () {
$("#citas_table").DataTable({
"responsive": true,
"autoWidth": false,
});
});
</script>