Multiple tab-pane failed to align properly

It looks OK except that you are missing the <tr> and </tr> in all of the @foreach loops. And that is why they all list in 1 row with many columns.

@foreach($leaverequesthods as $key => $leaverequesthod)
		<tr>
                            <td>
                                {{$key+1}}
                            </td>
                            <td>
                                {{isset($leaverequesthod->leavetype) ? $leaverequesthod->leavetype->leave_type_name : 'N/A'}}
                            </td>                                     
               </tr>
@endforeach

It's like you don't understand my point. All the @foreach has @endforeach. From the diagram, I have three tables: Line Manager Review, HOD Review and HR Service Review. Each have its datatable.

The issue is that, The table headers for the HOD Review and HR Service Review are not properly aligned. Only the first one (Line Manager Review ) is well aligned(the diagram is not here). See the diagram above, that's why its marked red. The headers are not well-aligned

Sorry I didn't format the code properly. You are missing the <tr> in all @foreach loops and the </tr> in the last 2 tables.

I did as you suggested, but the problem is still there. I think it has to do with the table header:

            <thead>
                <tr>

                    <th width="10%">
                        #
                    </th>
                    <th>
                        Leave Type
                    </th>
                </tr>
            </thead>

which is not properly aligned if you check the diagram.

Because @foreach is properly aligned.

Kindly assist.\

Thanks

Can you please share the whole code again? It works at my side when I test it with some dummy data.

<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)
                        <tr>
                            <td>
                                {{$key+1}}
                            </td>
                            <td>
                                {{isset($leaverequest->leavetype) ? $leaverequest->leavetype->leave_type_name : 'N/A'}}
                            </td>
                        </tr>
                    @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)
                        <tr>
                            <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)
                        <tr>
                            <td>
                                {{$key+1}}
                            </td>
                            <td>
                                {{isset($leaverequesthr->leavetype) ? $leaverequesthr->leavetype->leave_type_name : 'N/A'}}
                            </td>
                        </tr>
                    @endforeach 
                </tbody>
            </table>
                        </div>

                    </div>     
                </div>                                        


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

You would probably want to have different datatables classes for each table. For example datatableManagers, datatableHod, and datatableHr <table class=" table table-bordered table-striped table-hover datatableHr">. You will have to adjust the javascript also so you have 3 datatables.

Then you can check this https://datatables.net/forums/discussion/40908/bootstrap-tab-and-multiple-datatables