ng-Bootstrap Datepicker popup in a table not showing correctly

I have a ng-bootstrap datepicker in a table. The table is needed for a clear layout on the web site.

If i clicked on the button, then the popup is still showing like the table-height is. I tried so much and know I hope somebody has a solution for me.

<div id="tbl1" class="table-responsive" style="">
<table class="table table-sm" style="font-size: small">
<tbody>
<tr style="border: hidden">
<td style="width: 25%">Contract begin</td>
<td style="width: 25%">Contract end</td>
</tr>
<tr style="border: hidden;">
<td>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button">
<img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
</button>
</div>
</div>
</div>
</form>
</td>
<td>2001-01-01</td>
</tr>
</tbody>
</table>



Demo in Plunker

Continue reading...