jquery datatable - 表头宽度与Laravel中的正文宽度不对齐

Question

我在我的 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 数据表，如下所示。

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, 25, 50, "All"]]
    });
 });
</script>

当我渲染页面时，标题宽度与正文不对齐。看起来是这样的：

[![数据表][1]][1]

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

谢谢。

当我添加时

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

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

我收到了这个弹出窗口：

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

Answer 1

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

关于其他问题的更多信息：datatable jquery - table header width not aligned with body width