html - 向上滚动时的 Angular Material Table 标题与主标题的框阴影重叠

问题描述

当我向上滚动页面时，表格标题会重叠到主标题的阴影上，如下面的屏幕截图所示：

请在下面找到 Angular Mat 表的 HTML 代码：

   <ng-container>
<h1 id="opportunity-header" style="margin-left: 7.5%; margin-top: 22px;">
  Opportunities - {{ accountName }}
</h1>
 <div class="opportunity-container">
   <table mat-table [dataSource]="opportunityList">
   <ng-container matColumnDef="position">
     <th *matHeaderCellDef mat-header-cell mat-sort-header>
      No.
      </th>
      <td *matCellDef="let element; let i = index" mat-cell>
        {{ i + 1 }}
     </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th *matHeaderCellDef mat-header-cell class="nameColumn">
      Name
    </th>
     <td *matCellDef="let element" mat-cell class="name">
         {{ element.getName() }}
     </td>
   </ng-container>

  <ng-container matColumnDef="isAssociated">
    <th *matHeaderCellDef mat-header-cell class="isAssociatedColumn">
      isAssociated ({{ opportunityAssociated() }})
    </th>
    <td *matCellDef="let element" mat-cell class="isAssociated">
      {{ element.getIsAssociated() ? "Yes" : "No" }}
    </td>
  </ng-container>

  <ng-container matColumnDef="stage">
    <th *matHeaderCellDef mat-header-cell class="stageColumn">
      Stage
    </th>
    <td *matCellDef="let element" mat-cell class="stage">
      {{ element.getStage() }}
    </td>
  </ng-container>

  <ng-container matColumnDef="amount">
    <th *matHeaderCellDef mat-header-cell class="amountColumn">
      Amount
    </th>
    <td *matCellDef="let element" mat-cell class="amount">$ {{ element.getAmount() }}</td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns; sticky: true" mat-header-row></tr>
  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
  </table>
    <div *ngIf="opportunities?.length == 0" class="empty-record">
      No Opportunities
     <mat-divider class="empty-divider"></mat-divider>
    </div>
   </div>
  </ng-container>

CSS 代码：

        .opportunity-container {
           height: 251px;
           margin-left: 7.5%;
           margin-bottom: 35px;
           overflow: auto;
           }

       .table {
          width: 100%;
          }

      .empty-record{
       padding-top: 62px;
       padding-bottom: 27px;
       text-align: center;
       }

      .empty-divider{
       margin-top: 55px;
      }

      .empty{
       margin-left: 64px;
      }

      .table{
      padding-top: 25px;
      }

       th.mat-header-cell, td.mat-cell, td.mat-footer-cell{
       text-align: center;
       width: 229px;
       }

       ::-webkit-scrollbar {
       width: 5px;
       }

     ::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 10px;
        }

     ::-webkit-scrollbar-thumb {
        background: var(--gray-600);
        border-radius: 10px;
       }

    ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-700);
     }

     :host {
    margin: 1.3em 0 0;
   }

向上滚动页面时，垫子表与我的主标题栏（黄色）重叠，它也与主标题的阴影重叠，如红色框内的第二张图像所示。

任何帮助将不胜感激。

标签： htmlcssangular

html - 向上滚动时的 Angular Material Table 标题与主标题的框阴影重叠

问题描述

解决方案

推荐阅读