Table Column overflow the border and looks weird

I am using AdminLte-3.1 in Angular

The last two columns

<th scope="col">Created Date</th>
<th scope="col">Amount</th>


and

<td>{{ transaction?.createDt | date : "dd-MMM-yyyy" || "N/A" }}</td>
<td style="text-align: right">{{ transaction?.amount | currency : "N" || "N/A" }}</td>


spill over, and it makes it look weird

Kindly help resolve it

dashboard.html:

<div class="row">
<section class="col-md-12 connectedSortable">
<div class="card card-danger">
<div class="card-header border-transparent">
<h3 class="card-title">Latest Transactions</h3>
<div class="card-tools">
<button
type="button"
class="btn btn-tool"
data-card-widget="collapse"
>
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover m-0">
<thead>
<tr>
<th scope="col">Merchant</th>
<th scope="col">Account No.</th>
<th scope="col">Session ID</th>
<th scope="col">Description</th>
<th scope="col">Channel Name</th>
<th scope="col">Created Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody *ngIf="latestTransactionList != undefined">
<tr
*ngFor="
let transaction of latestTransactionList;
let i = index
"
>
<td>{{ transaction?.aggregatorId || "N/A" }}</td>
<td>{{ transaction?.acctNo || "N/A" }}</td>
<td>{{ transaction?.transactionId || "N/A" }}</td>
<td>{{ transaction?.description || "N/A" }}</td>
<td>{{ transaction?.channelName || "N/A" }}</td>
<td>
{{
transaction?.createDt | date : "dd-MMM-yyyy" || "N/A"
}}
</td>
<td style="text-align: right">
{{ transaction?.amount | currency : "N" || "N/A" }}
</td>
</tr>
<tr *ngIf="latestTransactionList.length == 0">
<td
style="text-align: center; font-weight: bold"
colspan="7"
>
No Data Found!
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer clearfix">
<a
[routerLink]="['/admin-dashboard/transactions-by-created-date']"
class="btn btn-sm btn-secondary float-right"
><i class="fas fa-search"></i> View All Transactions</a
>
</div>
</div>
</section>
</div>

Continue reading...