动态html表行高度(角度6)

时间:2019-01-04 21:29:29

标签: html angular bootstrap-4

我遇到了有关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;
}

Line overlap

0 个答案:

没有答案