ngx-dropdown visibility within table using property overflow visible - css

Question

I am trying to use the NGX dropdown menu in scrollable table however on the last row the dropdown get's cutoff by the overflow being hidden by default.
to overcome this, I set the table-responsive class to have these properties:
.table-responsive {
overflow-x: visible !important;
overflow-y: visible !important;
}
which results it having the desired look however disables my table being scrollable:
if I remove,
overflow-x: visible !important;
I get closer to my desired result however I want the dropdown to overflow out of the container, also the contents of the dropdown are initially hidden.
Is there are a way of having a scrollable table where the dropdown appears like the 2nd image.
<div class="table-responsive">
<table class="table table-bordered table-hover">
<div class="btn-group" dropdown>
<button class="btn btn-link" dropdownToggle>
<em class="fas fa-ellipsis-v fa-lg"></em>
</button>
<div *dropdownMenu class="dropdown-menu animated fadeInRight" role="menu">
<a [routerLink]="['/folder/editor', row[column.name]]" class="dropdown-item">
<em class="fas fa-fw fa-pencil-alt mr"></em>
<span>View/Edit</span>
</a>
<div class="dropdown-divider"></div>
<a [routerLink]="" (click)="openTransferLogModal(row[column.name])" class="dropdown-item">
<em class="fas fa-fw fa-list-ul mr"></em>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">

Answer 1

Is this the very last row in the table? Have you tried targeting just the ::nth-last-child selector or if its a NgFor Angular has a last-child you could utilize as well to set a class on the dropdown itself.
Either way the answer would be to adjust the absolute position of the dropdown menu on the last row. Not to mess with the table styles.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
http://plnkr.co/edit/evR8YKXgvpYWqHgt8zZE?p=preview
https://github.com/angular/angular/issues/10856

Answer 2

This is a continuation of the discussion from the solution proposed from #Jacebot
So prior to me working on the project it was revealed to me that "append to body" part of the dropdown was taken out of the code.
Putting this back, made the z-index of the dropdown go behind the body of my table.
So instead of appending to body, I appended to the table.
<div class="btn-group" dropdown container="table">
<button class="btn btn-link" dropdownToggle>
<em class="fas fa-ellipsis-v fa-lg"></em>
</button>
....