У меня проблема с реализацией таблицы для приложения 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;
}
Перекрытие линии