Невозможно установить высоту в таблице угловых материалов. Высота переполняет контейнер

Question

Я использую таблицу Angular Material и испытываю (многие) проблемы, заставляя стол иметь определенную высоту. Прямо сейчас таблица переполняет свой контейнер, когда ей достаточно данных. Я подумал, что если бы я дал контейнеру div фиксированный height (я на самом деле дал ему фиксированные height и max-height), то я мог бы затем дать его потомку что-то вроде height: 500px;. Очевидно, что это не работает - элемент таблицы не слушает какую-либо высоту, которую я ему задаю.

Я видел, что рекомендуется просто задать контейнер высотой и overflow: auto;, который в конечном итоге содержит таблицу внутри контейнера, но <th> не фиксируется сверху и прокручивается вне поля зрения, которое не является поведение, которое я ищу. Я хотел бы поставить полосу прокрутки на <tbody> и иметь возможность ее прокручивать, но держите эту прокрутку отдельно от названий категорий в <th> (она должна оставаться фиксированной вверху).

Это просто странное поведение таблицы HTML? Я не слишком знаком с таблицами HTML, но ожидал, что они будут вести себя как все остальные элементы HTML. Как я могу поместить элемент таблицы в его контейнер, не прокручивая всю вещь?

Вы можете найти мой код для рендеринга таблицы ниже:

// table.component.html

  <div class="table-container">
    <table [dataSource]="items" class="table" mat-table>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td  mat-cell *matCellDef="let item"> {{item.id}} </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let item"> {{item.name}} </td>
      </ng-container>

      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let item"> {{item.weight}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

// table.component.scss

.table-container {
  width: 100%;
  min-width: 445px;
  max-width: 1459px;
  height: 500px;
  max-height: 500px;
  border: 1px solid black;
  border-radius: 6px;
  box-sizing: border-box;
}

.table {
  width: 100%;
  height: 500px;
  max-height: 500px;
  line-height: 19px;
  font-size: 5.5px;
  border-collapse: collapse;

  td {
    border-bottom: none;
    padding: 30px;
  }

  th {
    border-bottom: 1px solid #A4B8CA;
    padding: 30px;
  }
}

Answer 1

Я думаю, вы должны использовать позицию для table-container и thead

.table-container {
    position: relative;    
}
thead {
    position: absolute;
    top: 0;
}

Answer 2

Вам просто нужно установить высоту стола.

и не забывайте sticky

tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

в вашей таблице.

<div class="table-container">
    <table [dataSource]="items" class="table" mat-table>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td  mat-cell *matCellDef="let item"> {{item.id}} </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let item"> {{item.name}} </td>
      </ng-container>

      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let item"> {{item.weight}} </td>
      </ng-container>

     tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <=== here
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

.scss файл

table{
  min-height: 500px
  max-height: 500px;
  overflow: auto !important;
}

Answer 3

Я бы удалил height, оставил max-height и добавил бы overflow для прокрутки, если это необходимо.

    .table-container {
      max-height: 500px;
      overflow: auto;
      ...
    }

   .mat-header-row {
      position: sticky;
      top: 0;
      z-index: 100;
  }