В общей, есть таблица, в внизу страницы.
Так вот, все работает четко до тех пор, пока в таблице находится ровно столько элементов сколько я и ожидаю(например 10).
Однако, на какой-нибудь последней таблице может быть элементов меньше и => моя пагинация вылетает наверх.
Fixed исправляет эту ситуацию, но тогда у меня пагинация накладывается поверх таблицы если кто-то ресайзит окно...
Подскажите, как я могу выйти из данной ситуации?
<div>
<table class="table table-dark table-hover">
<thead class="thead-dark">
<tr class="d-flex">
<th class="col-4" scope="col">Название сборки</th>
<th class="col-3" scope="col">Тип сборки</th>
<th class="col-2" scope="col">Автор сборки</th>
<th class="col-3" scope="col">
<div class="btn-toolbar mb-3 justify-content-center">
<a class="btn btn-warning btn-sm mr-1" [routerLink]='["add"]' *ngIf="permissionService.canUpload()"
role="button">Добавить сборку</a>
</div>
</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let entity of paginator?.currentPageItems">
<tr class="d-flex">
<td class="col-4">
{{entity?.name}}
</td>
<td class="col-3">
{{entity?.type.name}}
</td>
<td class="col-2">
{{entity?.owner.login}}
</td>
<td class="col-3">
<div class="btn-toolbar mb-3 justify-content-center" *ngIf="entity.id>0">
<button class="btn btn-primary btn-sm mr-1" (click)="onDownloadClick(entity)">Скачать</button>
<button class="btn btn-primary btn-sm mr-1" [routerLink]="['browser', entity.id]">Подробнее</button>
<button class="btn btn-primary btn-sm mr-1" (click)="onDescriptionClick(entity)">Описание</button>
</div>
</td>
</tr>
<tr class="d-flex" id='description' *ngIf="visibleDict.getValue(entity.id)==true">
<td class="col-12" colspan='4'>{{entity.description}}</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
<div class="row align-items-center justify-content-center pb-3">
<nav>
<ul class="pagination">
<li class="page-item" [ngClass]="{disabled:!paginator?.canMovePrev}"><a class="page-link"
(click)="paginator.goToPrevPage().subscribe()">Previous</a></li>
<li *ngFor="let page of pageArray" [ngClass]="{active:paginator.currentPageNumber==page}" class="page-item"><a
class="page-link" (click)="paginator.goToPage(page).subscribe()">{{page}}</a></li>
<li class="page-item" [ngClass]="{disabled:!paginator?.canMoveNext}"><a class="page-link"
(click)="paginator.goToNextPage().subscribe()">Next</a></li>
</ul>
</nav>
</div>
JsFiddle . Ну и соответственно, если убрать N строчек, то пагинаций уедет наверх, чего я не хочу...