jQuery datatable-表标题宽度与Laravel中的正文宽度不对齐

如何解决jQuery datatable-表标题宽度与Laravel中的正文宽度不对齐

我在Laravel-5.8项目中使用jQuery表头

          <div class="card-body">
            <div id="accordion">
              <!-- we are adding the .class so bootstrap.js collapse plugin detects it -->
              <div class="card  card-secondary">
                <div class="card-header">
                  <h4 class="card-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                      Internal Respondents
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">

<div class="card-body">
    <div class="table-responsive">
        <table id="myTable" class=" table table-bordered table-striped table-hover datatable datatable-internal">
            <thead>
                <tr>

                    <th width="10">
                        #
                    </th>
                    <th  width="30">
                        Respondent
                    </th>
                    <th  width="20">
                        Department
                    </th>          
                    <th  width="20">
                        Date
                    </th>  
                    <th  width="10">
                        Status
                    </th>                          
                    
                    <th  width="10">
                        &nbsp;
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach($skills as $key => $skill)
                    <tr>
                        <td>
                            {{$key+1}}
                        </td>
                        <td>
                            {{$skill->skill_name ?? '' }}
                        </td>
                        <td>
                            {{$skill->description ?? '' }}
                        </td>
                        <td>
                            {{$skill->skill_name ?? '' }}
                        </td>
                         <td>
                             {{$skill->description ?? '' }}
                        </td>
                        <td>

                        </td>                            
                                           
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div> 


                  </div>
                </div>
              </div>   

我正在使用JQuery databable，如下所示。

JavaScript

<script src="{{ asset('theme/adminlte3/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('theme/adminlte3/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('theme/adminlte3/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('theme/adminlte3/plugins/datatables-select/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('theme/adminlte3/plugins/datatables-buttons/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('theme/adminlte3/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('theme/adminlte3/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('theme/adminlte3/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>  

<script>
 $(document).ready(function() {
    $('#myTable').DataTable({
        stateSave: true,"pageLength": 10,"lengthMenu": [[10,25,50,-1],[10,"All"]]
    });
 });
</script>

渲染页面时，页眉宽度与主体不对齐。看起来是这样的：

[！[datatable] [1]] [1]

如何使数据表在页面加载时自动自动对齐？

谢谢。

我添加时

<script>
$(document).ready(function(){
   $('#example1-tab1-dt').DataTable({
      columns: [
         { width: '20%' },{ width: '20%' },{ width: '10%' },{ width: '15%' },{ width: '15%' }
      ]
   });

   $('#example1-tab2-dt').DataTable({
      columns: [
         { width: '20%' },{ width: '15%' }
      ]
   });
   
   $('a[data-toggle="tab"]').on('shown.bs.tab',function(e){
      $($.fn.dataTable.tables(true)).DataTable()
         .columns.adjust();
   });   
});    
</script>

我看到了这个弹出窗口：

DataTables警告：表id = example1-tab1-dt-无法重新初始化DataTable。有关此错误的更多信息，请参见http://datatables.net/tn/3 [1]：https://i.stack.imgur.com/RCMmB.png

解决方法

您的标题随数据的内容而变化。由于您目前没有数据，因此jquery无法计算标题项的宽度。

有关另一个问题的更多信息：datatable jquery - table header width not aligned with body width