角度材料表没有响应

Question

我有一个角度应用程序。它是使用 Angular Material 实现的。我使用了一个带有 22 列标签的表格。现在，当我最大化浏览器时，某些列未显示，移动浏览器中的事件所有列均未显示。我尝试过以下方法：

1. 首先，我尝试使用有角材料的“粘性”属性。它适用于宽度高达 110% 的浏览器。但是当我放大浏览器大小时效果不佳。
2. 添加引导程序并使用但仍然不适用于移动屏幕和大屏幕。

.html ::

<div *ngIf="!loadingAnimation && events.length > 0">
  <h1>View All Events</h1>
  <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
      </mat-form-field>
    </div>
<div class="loading-shade" *ngIf="loadingAnimation" class="center">
    <mat-spinner *ngIf="loadingAnimation"></mat-spinner>
  </div>
<div fxLayout="row" *ngIf="!loadingAnimation && events.length > 0">   
    <mat-paginator [length]="totalEvents" [pageSize]="eventsPerPage" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="true"  *ngIf="events.length > 0"
        (page)="onChangedPage($event)"></mat-paginator>
  <div class="table-container">

    <table class="table table-hover" mat-table matSort [dataSource]="dataSource" (matSortChange)="changeSort($event)">
      <ng-container matColumnDef="status" sticky >
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
        <td mat-cell *matCellDef="let event">
          <!-- <a [routerLink]="['/events/details-events']" [queryParams]="{matchId: event.matchId}" > {{event.status}}
          </a> -->
          <button mat-raised-button color="primary" (click)="openDialogDetails(event.matchId)">{{event.status}}</button>
         </td>
      </ng-container>
      <ng-container matColumnDef="eventDate" >
        <th table-primary mat-header-cell *matHeaderCellDef mat-sort-header> Event_Date </th>
        <td mat-cell *matCellDef="let event"> {{event.eventDate}} </td>
      </ng-container>
      <ng-container matColumnDef="teacherName" >
        <th mat-header-cell *matHeaderCellDef mat-sort-header > Teacher_Name </th>
        <td mat-cell *matCellDef="let event">
          <!-- <a [routerLink]="['/events/details_teachers']" [queryParams]="{memType:'R',memId:event.memId}" > {{event.teacherName}}</a> -->
          <button mat-raised-button color="primary" (click)="openDialog('R',event.memId)">{{event.teacherName}}</button> 
        </td>
      </ng-container>
      <ng-container matColumnDef="school" >
        <th mat-header-cell *matHeaderCellDef mat-sort-header> School </th>
        <td mat-cell *matCellDef="let event"> {{event.school}} </td>
      </ng-container>
      <ng-container matColumnDef="address1">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Address1</th>
        <td mat-cell *matCellDef="let event"> {{event.address1}} </td>
      </ng-container>
      <ng-container matColumnDef="address2">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Address2 </th>
        <td mat-cell *matCellDef="let event"> {{event.address2}} </td>
      </ng-container>
      <ng-container matColumnDef="city">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> City </th>
        <td mat-cell *matCellDef="let event"> {{event.city}} </td>
      </ng-container>
      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
        <td mat-cell *matCellDef="let event"> {{event.state}} </td>
      </ng-container>
      <ng-container matColumnDef="zip">
        <th mat-header-cell *matHeaderCellDef mat-sort-header > Zip </th>
        <td mat-cell *matCellDef="let event"> {{ event.zip }} </td>
      </ng-container>
      <ng-container matColumnDef="grade">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Grade </th>
        <td mat-cell *matCellDef="let event">  &nbsp; {{ event.grade }} </td>
      </ng-container>
      <ng-container matColumnDef="scientistName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Scientist_Name </th>
        <td mat-cell *matCellDef="let event" >
           <!-- <a routerLink="/events/events-scientists">{{event.scientistName}}</a> -->
           <button mat-raised-button color="primary" (click)="openDialog('V',event.scientistUserId)">{{event.scientistName}}</button> 
          </td>
      </ng-container>
      <ng-container matColumnDef="instName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Institute_Name </th>
        <td mat-cell *matCellDef="let event" > {{event.instName}} </td>
      </ng-container>
      <ng-container matColumnDef="instAddress1">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Addr1 </th>
        <td mat-cell *matCellDef="let event" > {{event.instAddress1}} </td>
      </ng-container>

      <ng-container matColumnDef="instAddress2">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Addr2 </th>
        <td mat-cell *matCellDef="let event" > {{event.instAddress2}} </td>
      </ng-container>
      <ng-container matColumnDef="instCity">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_City </th>
        <td mat-cell *matCellDef="let event" > {{event.instCity}} </td>
      </ng-container>
      <ng-container matColumnDef="instState">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_State </th>
        <td mat-cell *matCellDef="let event"> {{event.instState}} </td>
      </ng-container>
      <ng-container matColumnDef="instZip">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Inst_Zip </th>
        <td mat-cell *matCellDef="let event" > {{event.instZip}} </td>
      </ng-container>
      <ng-container matColumnDef="classSize">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Class_Size </th>
        <td mat-cell *matCellDef="let event" > {{event.classSize}} </td>
      </ng-container>
      <ng-container matColumnDef="shirtSize" stickyEnd  >
        <th mat-header-cell *matHeaderCellDef mat-sort-header > Shirt_Size </th>
        <td mat-cell *matCellDef="let event" > {{event.shirtSize}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

        <!-- <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> -->
</div>
<label *ngIf="!loadingAnimation && events.length == 0">No events found, please create one!</label>

.css ::

table {
  overflow: scroll;

}


.table-container {
  height:400px;
  width:900px;
  overflow:scroll;
}

.loading-shade {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 56px;
  right: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mat-table-sticky:first-child {
  border-right: 1px solid #e0e0e0;
}

.mat-table-sticky:last-child {
  border-left: 1px solid #e0e0e0;
}
td.mat-column-star {
  width: 5px;
  padding-right: 4px;
}

th.mat-column-position, td.mat-column-position {
  padding-left: 4px;
}

我需要更具响应性的方法，以便它可以在任何浏览器中运行，而不管大小。

Answer 1

对于使用Flex一个负责任的表，你需要使用<mat-table>的替代<table mat-table>。您不会自动调整内容大小。您还需要更改所有行和标题，如<tr mat-row>to<mat-row>

https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-

Answer 2

如果您仍然想使用表格，另一个选择是在 css 中为表格设置水平滚动，如下所示

在你的html中

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort matSortActive="posteddate" matSortDirection="asc">
   ....

并在你的CSS中

 .mat-elevation-z8 {    
    overflow-x: auto;
   }