Laravel - Несколько вкладок не были правильно выровнены

Question

1. У меня есть три таблицы на каждой вкладке
2. Это #manager, #hod, # hrservice
3. Когда я загружал страницу, только первая (# менеджер) выровнен правильно, остальные не выровнялись.

    <div class="card">
      <div class="card-header p-2">
         <ul class="nav nav-pills">
            <li class="nav-item"><a class="nav-link active" href="#manager" data-toggle="tab">Line Manager Review</a></li>
              <li class="nav-item"><a class="nav-link" href="#hod" data-toggle="tab">HOD Review</a></li>
               <li class="nav-item"><a class="nav-link" href="#hrservice" data-toggle="tab">HR Service Review</a></li>
                </ul>
              </div> 
              <div class="card-body">
                <div class="tab-content">
                  <div class="active tab-pane" id="manager">
                    <div class="row">
                        <div class="table-responsive">
            <table class=" table table-bordered table-striped table-hover datatable">
                <thead>
                    <tr>
                        <th width="10%">
                            #
                        </th>
                        <th>
                            Leave Type
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($leaverequests as $key => $leaverequest)
                            <td>
                                {{$key+1}}
                            </td>
                            <td>
                                {{isset($leaverequest->leavetype) ? $leaverequest->leavetype->leave_type_name : 'N/A'}}
                            </td>
                    @endforeach 
                </tbody>
            </table>
                        </div>

                    </div>    
                 </div> 

                <div class="tab-pane" id="hod">
                    <div class="row">
                        <div class="table-responsive">
            <table class=" table table-bordered table-striped table-hover datatable">
                <thead>
                    <tr>

                        <th width="10%">
                            #
                        </th>
                        <th>
                            Leave Type
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($leaverequesthods as $key => $leaverequesthod)
                            <td>
                                {{$key+1}}
                            </td>
                            <td>
                                {{isset($leaverequesthod->leavetype) ? $leaverequesthod->leavetype->leave_type_name : 'N/A'}}
                            </td>                                     
                    </tr>
                    @endforeach 
                </tbody>
            </table>
                        </div>

                    </div>     
                </div>      

                <div class="tab-pane" id="hrservice">
                    <div class="row">
                        <div class="table-responsive">
            <table class=" table table-bordered table-striped table-hover datatable">
                <thead>
                    <tr>

                        <th width="10%">
                            #
                        </th>
                        <th>
                            Leave Type
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($leaverequesthrs as $key => $leaverequesthr)
                            <td>
                                {{$key+1}}
                            </td>
                            <td>
                                {{isset($leaverequesthr->leavetype) ? $leaverequesthr->leavetype->leave_type_name : 'N/A'}}
                            </td>
                    @endforeach 
                </tbody>
            </table>
                        </div>

                    </div>     
                </div>                                        


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

From the diagram, the HOD and the HR Service tab-pane did not align properly. But the first one, Manager tab-pane is okay.

Как правильно настроить выравнивание?