Question

我正在使用Angular Material table，并且在将桌子强制设置为一定高度时遇到了很多麻烦。现在，当有足够的数据提供给表时，该表将溢出其容器。我以为如果给容器div一个固定的height（实际上给它一个固定的height和max-height），那么我可以给它的孩子一个类似height: 500px;的东西。显然这是行不通的-table元素没有听我给它的任何高度。

我已经看到它建议只给容器一个高度和overflow: auto;，它最终会将表格包含在容器内，但是<th>并没有固定在顶部并且滚动到视线之外这不是我要寻找的行为。我想在<tbody>上放置一个滚动条并能够滚动它，但要使该滚动条与<th>中的类别名称分开（应该在顶部固定）。

这只是奇怪的HTML表行为吗？我对HTML表不太熟悉，但是希望它们的行为像所有其他HTML元素一样。如何在不滚动整个内容的情况下将table元素放入其容器中？

您可以找到我的代码来呈现下表：

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

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

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

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

Answer 2

我认为您应该对setInterval和function ping() { setInterval( getMachineAction(), 2000 ); }使用排名

table-container

Answer 3

您只需要设置桌子高度即可。

也不要忘记粘性

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 4

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

然后添加样式

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

无法在“角度材质”表上设置高度。高度溢出容器

4 个答案:

在您的桌子上。

.scss文件