我有一个角度应用程序，它是使用Angular Material实现的。我使用了一个带有22列标签的表格。 现在，当我最大化浏览器时，某些列未显示，并且在移动浏览器中，所有列均未显示。 我尝试了以下方法：
.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"> {{ 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;
}
我需要更具响应性的方法，以便无论大小如何，它都可以在任何浏览器中使用。
答案 0 :(得分：0)
对于具有flex的响应表，您需要使用<mat-table>而不是<table mat-table>。您不会自动调整内容的大小。另外，您需要将所有行和标头（如<tr mat-row>更改为<mat-row>
https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-
答案 1 :(得分：0)
如果您仍然想使用表格，另一种选择是像这样在 css 中为您的表格设置水平滚动
在你的 html 中
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort matSortActive="posteddate" matSortDirection="asc">
....
在你的 css 中
.mat-elevation-z8 {
overflow-x: auto;
}
答案 2 :(得分：0)
将标题更改为一列，将记录更改为另一列。看下面的例子
Name | Surname | Email | etc..
------------------------------------------
itemName | itemSurname | itemEmail | etc..
Header | Value
----------------------
Name | itemName
Surname | itemSurname
Email | itemEmail
etc.. | etc..