如何解决使用 css 和 bulma 将表格内的按钮居中
我使用 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>
解决方法
<tr>
<td class="has-text-centered" colspan="6">
<button class="button">Show more</button>
</td>
</tr>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。