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

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>

标签： htmlcssbulma

Answer 1

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