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

ProgramBox

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

Post author:admin
Запись опубликована:3 апреля, 2023
Post category:Вопросы по программированию

#html #css #angular #html-table #angular-material

#HTML #css #угловой #html-таблица #angular-материал

Вопрос:

Я использую таблицу 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;
  }
}

Ответ №1:

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

и не забудьте о липком :

 <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>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

файл .scss

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

Ответ №2:

Я думаю, вам следует использовать position для table-container и thead

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

1. Кажется, не работает, если я чего-то не хватает. Он просто помещает тело таблицы под заголовок. Все по-прежнему переполняется, и добавление overflow-y: scroll в контейнер по-прежнему прокручивает заголовок вверх. Кроме того, это добавляет некоторые странные проблемы со стилем заголовка (например, ширина заголовка больше не составляет 100% от ширины таблицы)

Ответ №3:

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

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

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

1. Я видел, что это рекомендуется, как я упоминал в вопросе, но проблема с этим решением заключается в том, что оно прокручивает заголовок таблицы. Мне нужно, чтобы заголовок таблицы оставался фиксированным сверху, и я хотел бы прокрутить тело таблицы

2. Как ни странно, стили на mat-header-row ничего не делают — position: sticky; не заставляют его держаться наверху. Другая потенциальная проблема заключается в том, что я пытаюсь отобразить полосу прокрутки только в теле таблицы, под заголовком. Изображение ниже должно дать вам лучшее представление о том, что я имею в виду imgur.com/ashrZb5

Ответ №4:

Просто попробуйте заменить следующие теги
<table> к <mat-table>
<th mat-header-cell> к <mat-header-cell>
<td mat-cell> к <mat-cell>

Затем добавьте стиль

 .mat-table {
  overflow: auto;
  max-height: 270px;
}

Ответ №5:

Вы можете поместить элемент таблицы внутри оболочки / div:

 <div id="table-container">
   <table mat-table .....>
   </table>
</div>

Затем создайте оболочку с желаемой высотой:

 #table-container {
  height: 600px;
  overflow: auto; //--> if you want to make it scroll-able 
}