我遇到了有关Angular应用程序的表实现的问题。我的机器上的表格和其他许多表格看起来都不错,但是一些用户看到表格底部有重叠的行。我怎样才能使它充满活力?以下也是一些用户看到的内容。
HTML
<div class="col card-body dashboard-cards">
<table class="table table-hover dashboard-table">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 25%">Name</th>
<th style="width: 25%">Business Criticality</th>
<th style="width: 15%">Current Status</th>
<th style="width: 10%">Owner</th>
<th style="width: 5%">Department</th>
</tr>
</thead>
<tbody>
<tr style="line-height: 29px;" *ngFor="let crit of crits | paginate:{id:'crit-pagination', itemsPerPage: 7, currentPage: crit}; let i = index;">
<td class="table-td" (click)="openCrit(crit)">
{{crit.id}}
</td>
<td class="table-td" (click)="openCrit(crit)">
{{crit.businessCrit}}
</td>
<td class="table-td" (click)="openCrit(crit)">
{{crit.status}}
</td>
<td class="table-td" (click)="openCrit(crit)">
{{crit.action}}
</td>
<td class="table-td" (click)="openCrit(crit)">
{{crit.dueDate | date: 'shortDate'}}
</td>
<td class="text-center table-td">
<div class="dropdown">
<a class="btn btn-naked" [attr.id]="'dropdownMenuButtonForcrit_' + i" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v text-muted" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<strong class="dropdown-header">Options</strong>
<a class="dropdown-item" (click)="editCrit(crit)">
<i class="fa fa-pencil-square-o margin-right-sml text-muted dropdown-item-icon" aria-hidden="true"></i>
Edit
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination-footer d-flex justify-content-center card-footer card-panel-footer bg-white text-dark">
<pagination-controls class="critPagination" id="crit-pagination" (pageChange)= "crit = $event"></pagination-controls>
</div>
CSS文件
.critPagination /deep/ .ngx-pagination {
text-align: center;
padding-left: 0;
padding-top: 10px;
}
.dashboard-table {
width: 100%;
table-layout: fixed;
}
.table-td {
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.dashboard-cards {
min-height: 402px;
max-height: 402px;
padding: 0px;
}