динамическая высота строки таблицы html (угловая 6) - PullRequest
0 голосов
/ 05 января 2019

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

Перекрытие линии

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...