DataTable标头在模态内无法很好地呈现

Question

我正在使用modals，在其中创建Datatables。但是有一种我根本不了解的行为。当我发送数据并有时创建数据表时，它的呈现效果不佳。这是一个关于我的意思的例子。

但是事实是，它只是仅发生，就像我打开模态的40％的时间一样。我不知道为什么会这样。这是我的模式代码和Vue函数。

<div class="modal fade" id="detallePresupuestoTransferencia" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg  modal-dialog-centered">
        <div class="modal-content" style="border-radius: 10px;">
            <input id="idDetallePresupuesto" type="hidden">
            <input id="idDetalleTipo" type="hidden">
            <div class="modal-header" style="height: 58px;">
                <button type="button" class="close" data-dismiss="modal"> 
                    <span>&times;</span>
                </button>
                <h3 id="titulo" style="color: #3C8DBC; margin-top: 1px;"><strong>{{ __("Movements") }}</strong></h3>
            </div>
            <div class="modal-body" style="overflow-y:auto;">
                <div class="panel panel-default"> 
                        <div class="panel-heading">
                            <strong>TYPE:
                                <span id="detalleEspecifica"></span>
                                <span id="subtituloT"></span>
                            </strong>
                            <strong style='float:right;'>TYPE2:
                                <span id="tipoT"></span>
                            </strong>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive-lg">
                                <table id="table1" class="table table-bordered table-condensed table-striped nowrap" style="width:100%; table-layout:fixed;">
                                    <thead>
                                        <tr style="background: #B7CEEC;">
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Date")) }}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 1")) }}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 2")) }}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 3")) }}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{!! strtoupper(__("Amount<br>5")) !!}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{!! strtoupper(__("Final<br>Amount")) !!}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Final Amount 2")) }}</th>
                                        </tr>
                                    </thead>
                                    <tbody style="text-align: center; vertical-align: middle;">  
                                    </tbody>
                                </table>
                            </div>
                        </div>  
                </div> 
            </div>
        </div>
    </div>
</div>

这是我的Vue函数：

var url= '...';
$('#table1').DataTable({
          "scrollX": true,
           "scrollY": 300,
           "ordering": false,
           "scrollCollapse": true,
           "pageLength": 10,
           "bFilter": false,
           "bLengthChange": false,
           "bAutoWidth": false,
           "lengthMenu": [[5,10,25,50,75,100,-1 ],[5,10, 25, 50, 750, "All"]],
           dom:'<"div-longitud col-md-4"l><"div-botones col-md-4 text-center"B><"div-filtrado col-md-4"f>rt<"div-indice col-md-6"i><"div-paginacion col-md-6"p><"clear">',
           language:language.languageDataTables(),
           "ajax": {
                "url": url,
                "type": "POST",
                "data": data
            },
            columns: [
                {data: 'date', "width": "9%"},
                {data: 'amount 1', "width": "9%"},
                {data: 'amount 2', "width": "27%"},
                {data: 'amount 3', "width": "27%"},
                {data: 'amount 4'},
                {data: 'amount 5'},
                {data: 'amount 6}
            ],
            buttons: [{
                extend:    'excelHtml5',
                text:      '<i class="fa fa-file-excel-o"></i>',
                titleAttr: 'Exportar a Excel',
                title: 'MOVEMENTS',
                className: 'btn btn-success btn-xs',
                exportOptions: {
                    columns: [0,1,2,3,4,5,6]
                },
                autoFilter: true
            }],
           destroy:true,
        });

从我的API控制器中，我返回了一个这样的DataTable对象（但是我认为这与该问题无关）

return Datatables::of($data)->make(true);

那么，有人可以告诉我这种行为的原因吗？我在做什么错了？

我重复一遍，这种情况只发生在打开模态40％的时间，完全打开模态60％的时间