使用 css 和 bulma 在表格內居中按鈕

Question

我正在使用 Bulma 作為 CSS 框架來設置我的 angular 應用程序的樣式，目前，我有一個如下所示的表格：

我試圖讓它看起來更像這樣：

如何使按鈕居中並使表格看起來盡可能接近這個？

這是我正在使用的代碼：

 <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>