时间戳

首页 > 解决方案 > 如何让表悬停引导程序 4 开始工作

bootstrap-4 - 如何让表悬停引导程序 4 开始工作

问题描述

我创建了一个表，其中填充了数组中的项目，我想向它添加 table-hover 但它不起作用。关于如何使它工作的任何建议？

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>Log Name</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody *ngFor="let log of logs">
        <td>{{log.text}}</td>
        <td class="log-date"> {{log.date | date: 'short'}} <i (click)="onDelete(log)" typle="button"  class="close">&times;</i></td>

    </tbody>
</table>

标签： bootstrap-4

解决方案

由于您错过了添加表格行标签，因此没有首先创建行来显示悬停功能。

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>Log Name</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody *ngFor="let log of logs">
        <tr>
            <td>{{log.text}}</td>
            <td class="log-date"> {{log.date | date: 'short'}} <i (click)="onDelete(log)" typle="button"  class="close">&times;</i></td>
        <tr>

    </tbody>
</table>

推荐阅读