Centering a button inside a table using css and bulma - html

Question

I am using Bulma as a CSS frame to style my angular app, currently, I have a table that looks like this :
I am trying to make it look more like this :
How do I center the button and make the table look as close as it can to this one?
Here is the code I am using :
<table
class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"
>
<thead>
<tr>
<th>SESSION_ID</th>
<th>CARD_NUMBER</th>
<th>TRANSACTION_AMOUNT</th>
<th>TERMINAL_ID</th>
<th>EXTERNAL_STAN</th>
<th>TRANSACTION_DATE</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="
let row of MatchTransactions.onlyInFile1
| slice: 0:(page + 1) * 5;
let i = index
"
>
<td>{{ row.SESSION_ID }}</td>
<td>{{ row.CARD_NUMBER }}</td>
<td>{{ row.TRANSACTION_AMOUNT }}</td>
<td>{{ row.TERMINAL_ID }}</td>
<td>{{ row.EXTERNAL_STAN }}</td>
<td>{{ row.TRANSACTION_DATE }}</td>
</tr>
<tr>
<td class="is-centered" colspan="6">
<button
class="button"
*ngIf="
(page + 1) * 5 < MatchTransactions.onlyInFile1.length
"
(click)="page = page + 1"
>
Show more
</button>
</td>
</tr>
</tbody>
</table>

Answer 1

<tr>
<td class="has-text-centered" colspan="6">
<button class="button">Show more</button>
</td>
</tr>