prime ng p-table footer is going over tr's

I am using prime-ng table and Im trying to put a button in the bottom of the table and i want this button to be always close to the bottom of the table but the footer is going over the last

here is the p-table structure

footer is located before is end (just like prime ng docus)

like you see here (https://i.sstatic.net/ARbHoY8J.png) basically i want footer not to be scrolled with the table(thats what happened but last tr is going under the button)

        <div class="major ml-5 overflow-hidden h-full " *ngIf="!isLoading" [ngClass]="{'pb-6rem':!isCareTeamManage}">
            <div class="h-full">
        <ng-container *ngIf="careTeams?.length; else empty">
            <p-table
                [value]="careTeams"
                [resizableColumns]="true"
                [scrollable]="true"
                scrollHeight="flex"
                [rowHover]="true"
                sortField="careTeamName"
                [sortOrder]="1"
            >
            <ng-template pTemplate="caption">
                <div class="txt-lg uppercase title">CARETEAM MANAGEMENT</div>
            </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th class="w-20rem" pSortableColumn="careTeamName">
                            <div class="flex align-items-center relative">
                                <span class="uppercase overflow-hidden text-overflow-ellipsis">name</span>
                                <p-sortIcon field="careTeamName"></p-sortIcon>
                            </div>
                        </th>

                        <th class="w-20rem" pSortableColumn="businessInstitution">
                            <div class="flex align-items-center relative">
                                <span class="uppercase overflow-hidden text-overflow-ellipsis">institution</span>
                                <p-sortIcon field="businessInstitution"></p-sortIcon>
                            </div>
                        </th>

                        <th class="w-1"></th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-careteam let-i="rowIndex">
                    <tr>
                        <td class="flex">
                            <span class="icon icon-careteam txt-2xl pr-5"></span>
                            <span
                                class="overflow-hidden text-overflow-ellipsis w-20rem"
                                pTooltip="{{ careteam.careTeamName }}"
                                tooltipPosition="bottom"
                                tooltipStyleClass="max-content"
                                >{{ careteam.careTeamName }}</span
                            >
                        </td>
                        <td>
                            <div
                                class="overflow-hidden text-overflow-ellipsis w-20rem"
                                pTooltip="{{ careteam.businessInstitution }}"
                                tooltipPosition="bottom"
                                tooltipStyleClass="max-content"
                            >
                                {{ careteam.businessInstitution }}
                            </div>
                        </td>
                        <td>
                            <div
                                class="overflow-hidden text-overflow-ellipsis w-14rem"
                                pTooltip="{{ careteam.city }}"
                                tooltipPosition="bottom"
                                tooltipStyleClass="max-content"
                            >
                                {{ careteam.city }}
                            </div>
                        </td>

                        <td>
                            <div class="text-right">
                                <!-- [routerLink]="['/careteam', careteam.systemID, 'members']" -->

                                <span
                                    class="txt-link hyper-hover cursor-pointer pr-4"
                                    [routerLink]="['/settings/account/careTeams', careteam.systemID]"
                                    (click)="setBackToMainNav(careteam.systemID)"
                                    >Manage</span
                                >
                                <span class="txt-link hyper-hover cursor-pointer" (click)="openDeletionModel(careteam.systemID, i)"
                                    >Delete</span
                                >
                            </div>
                        </td>
                    </tr>
                </ng-template>
                 <ng-template pTemplate="footer" >
                    <p-button *ngIf="!isCareTeamManage" label="New" (click)="newCareTeam()"></p-button>
                 </ng-template>
            </p-table>



        </ng-container>
        <ng-template #empty>
            <div class="emptyMsg py-4">{{ emptyMsg }}</div>
        </ng-template>
    </div>
</div>

<p-confirmDialog></p-confirmDialog>

<div class="center-screen" *ngIf="isLoading">
    <div  class="spinner "></div>
</div>
    

If you use a summary template you can have a proper footer on your table.

<ng-template pTemplate="summary">
    <p-button *ngIf="!isCareTeamManage" label="New" (click)="newCareTeam()"></p-button>
</ng-template>