使用 css 和 bulma 将按钮置于 table 内

Question

我使用 Bulma 作为 CSS 框架来设计我的 angular 应用程序，目前，我有一个 table 看起来像这样：

我想让它看起来更像这样:

如何使按钮居中并使 table 看起来尽可能接近这个按钮？

这是我使用的代码：

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

使用 css 和 bulma 将按钮置于 table 内

Centering a button inside a table using css and bulma

html

css

bulma