无法在 Angular Material 表上设置高度。高度溢出容器

Posted 2023-03-05

【中文标题】无法在 Angular Material 表上设置高度。高度溢出容器

【英文标题】：Can't set height on Angular Material table.. height overflows container

【发布时间】：2019-08-26 12:41:18

【问题描述】：

我正在使用Angular Material table，并且在强制桌子达到一定高度时遇到了（很多）麻烦。现在，当有足够的数据提供给它时​​，该表正在溢出其容器。我想如果我给容器 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】：

我认为您应该为table-container 和thead 使用位置

.table-container 
    position: relative;    

thead 
    position: absolute;
    top: 0;

【讨论】：

似乎没有工作，除非我错过了什么。它只是将表格主体放在标题下方。一切仍然溢出，将overflow-y: scroll 添加到容器中仍然会向上滚动标题。此外，它还为表头添加了一些奇怪的样式问题（例如，表头的宽度不再是表格宽度的 100%）

【参考方案2】：

如果需要，我会删除 height 并保留 max-height 并添加 overflow 以滚动。

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

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

【讨论】：

我已经看到了这个推荐，就像我在问题中提到的那样，但是这个解决方案的问题是它会滚动表格标题。我需要表格标题保持固定在顶部，我想滚动表格主体

奇怪的是，mat-header-row 上的样式并没有做任何事情 - position: sticky; 并没有让它保持在顶部。另一个潜在的问题是我试图让我的滚动条只在表格的主体中，在标题下。下面的图片应该让您更好地了解我的意思imgur.com/ashrZb5

【参考方案3】：

只需尝试替换以下标签<table> 到 <mat-table><th mat-header-cell> 到 <mat-header-cell><td mat-cell> 到 <mat-cell>

然后添加样式

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

【讨论】：

无论如何也不能设置桌子的高度..！！

【参考方案4】：

你只需要设置桌子高度。

别忘了粘性：

<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;