jquery datatable - the table header width not aligned with the body width in Laravel

Question

I am using jQuery table header in my Laravel-5.8 project

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

I am using JQuery databable as shown below.

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>

When I rendered the page, the header width did not align with the body. It appears this way:

[![datatable][1]][1]

How do I make the datatable to automatically align by itself when the page loads?

Thank you.

When I added

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

I got this popup:

DataTables warning: table id=example1-tab1-dt - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 [1]: https://i.stack.imgur.com/RCMmB.png

For [tag:laravel-datatables], the best way is, use https://yajrabox.com/docs/laravel-datatables/master/installation the official laravel datatables library. — STA, Aug 20 '20 at 15:30
Please refer [this](https://datatables.net/forums/discussion/43684/header-and-body-alignment-problem) `$($.fn.dataTable.tables(true)).DataTable() .columns.adjust();` when table becomes visible it aligns with body — Arman, Aug 20 '20 at 15:34

score 0 · Accepted Answer · answered Aug 20 '20 at 15:37

0

Your header flexes with the content of your data. as you currently have no data, jquery is unable to calculate the width of the header items.

More information on this other question: datatable jquery - table header width not aligned with body width

answered Aug 20 '20 at 15:37

Nick van der Waal

414
2
13

When followed your instruction. I have updated my code with the new popup - DataTables warning: table id=example1-tab1-dt - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 – mikefolu Aug 20 '20 at 19:37
"Nickvanderwaal - I am using accordion – mikefolu Aug 20 '20 at 19:48

jquery datatable - the table header width not aligned with the body width in Laravel

1 Answers1