角材料使页眉和页脚变粘
我将Angular6与Angular材质设计模板一起使用。目前，我的结果如下
当前，我的页眉和页脚有粘性，但是滚动数据集并不友好。
test是我的HTML文件，
issue-data-html我的css文件如下，
<div class="mainDiv">
<div class="mat-elevation-z8 issueDataCard">
<div style="position: relative; z-index: 1; " class="app-list-header" fxLayout="row" fxLayoutAlign="start baseline"
fxLayoutGap="8px" fxLayoutGap.gt-xs="24px">
<div fxLayout="column" fxLayoutAlign="start baseline" fxLayoutGap="24px" fxFlex="grow" fxLayout.gt-xs="row">
<div class="app-list-name">
<h3>
Issue Statuses
</h3>
</div>
<div class="vl"></div>
<!--Search-->
<mat-form-field class="app-filter-input" floatPlaceholder="never" fxFlex>
<mat-icon class="app-filter-input-icon" matPrefix>search</mat-icon>
<input matInput #filter placeholder="Search…" (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div fxFlex="none">
<button mat-mini-fab style="background-color: #281c7b;" *ngIf="showAddIssueDataIcon"
(click)="addIssueData(null)" matTooltip="Add Issue Data">
<mat-icon>add</mat-icon>
</button>
</div>
<button class="app-column-filter" type="button" mat-icon-button [matMenuTriggerFor]="columnFilter">
<mat-icon style="font-size: 130%; color:#929292" matTooltip="Configure Table">settings</mat-icon>
</button>
<mat-menu #columnFilter="matMenu" yPosition="below" xPosition="before">
<button class="checkbox-item mat-menu-item" *ngFor="let column of displayedColumns"
(click)="toggleColumnVisibility(column, $event)">
<mat-checkbox [(ngModel)]="column.visible" (change)="columnFilterCheckboxClick($event)" class="checkbox"
#checkbox (click)="$event.stopPropagation()">
{{ column.name }}
</mat-checkbox>
</button>
</mat-menu>
<ng-content select=".actions"></ng-content>
</div>
<!--table-->
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- issueStatus Column -->
<ng-container matColumnDef="issueStatus">
<th mat-sort-header="name" mat-header-cell *matHeaderCellDef>ISSUE STATUS</th>
<td mat-cell *matCellDef="let element">
{{element.name}}
</td>
</ng-container>
<!-- showInBacklog Column -->
<ng-container matColumnDef="showInBacklog">
<th mat-sort-header="backlog" mat-header-cell *matHeaderCellDef>SHOW IN BACKLOG</th>
<td mat-cell *matCellDef="let element" style="text-transform: uppercase">
{{element.backlog}}
</td>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<th mat-sort-header="status" mat-header-cell *matHeaderCellDef>STATUS</th>
<td mat-cell *matCellDef="let element" style="text-transform: uppercase">
{{element.status}}
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef class="action-cell" style="padding-right: 40px">ACTIONS</th>
<td mat-cell *matCellDef="let element; let i = index" class="action-cell">
<button mat-icon-button *ngIf="showAddIssueDataIcon" (click)="editIssueData(element)">
<mat-icon class="iconStyle" matTooltip="Edit Issue Data">edit</mat-icon>
</button>
<!-- -->
<a style="cursor: pointer" *ngIf="showEditIssue">
<i class="material-icons" style="color:#757575" [matMenuTriggerFor]="selectMenu"
matTooltip="More actions">more_vert</i></a>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item *ngIf="element.status === 'INACTIVE'"
(click)="onClickEditStatus(element , true,i)">Make Active</button>
<button mat-menu-item *ngIf="element.status === 'ACTIVE'"
(click)="onClickEditStatus(element , false,i)">Make Inactive</button>
<button mat-menu-item (click)="deleteIssueData(element,i)">Delete</button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="visibleColumns"></tr>
<tr mat-row *matRowDef="let row; columns: visibleColumns;"
[ngClass]="{ hovered: row.hovered, highlighted: row.highlighted }" (click)="row.highlighted = !row.highlighted"
(mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></tr>
</table>
<mat-paginator [pageSize]="savedPageSize" (page)="columnFilterCheckboxClick($event)"
[pageSizeOptions]="[5, 10, 20, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
我不知道如何根据自己的需要更改这些CSS类，任何帮助都会被接受。
3 个答案:
答案 0 :(得分：6)
或者您可以只在tr mat-header-row上使用粘性。例如：
<tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky:true"></tr>
答案 1 :(得分：1)
我认为这可以解决问题，请生成代码的堆栈闪电
table {
width: 100%;
}
答案 2 :(得分：0)
最后几个小时的编码和更改CSS的过程中，我找到了我的问题的答案，我想在这里发布，因为这对将来的人很有帮助。
如果我看上面的问题，我使用了纯<table></table>标签来创建表格，行和列都使用了<th></th>和<td></td>标签。在Angular Material中，有一些特定的标签可用于创建表格，分配行和列，以及添加粘性页眉和页脚。如果我们不使用这些标签，则可能会出现一些偏差。所以最后我将代码更改如下，
issue-data-component.html文件如下，
<div class="mainDiv">
<div class="example-container mat-elevation-z8" style="background-color: white"
(click)="columnFilterCheckboxClick($event)">
<div>
<div class="app-list-header" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="8px"
fxLayoutGap.gt-xs="24px">
<div fxLayout="column" fxLayoutAlign="start baseline" fxLayoutGap="24px" fxFlex="grow" fxLayout.gt-xs="row">
<div class="app-list-name">
<h3> Issue Statuses</h3>
</div>
<div class="vl"></div>
<mat-form-field class="app-filter-input" floatPlaceholder="never" fxFlex>
<mat-icon style=" color: #999999;" class="app-filter-input-icon" matPrefix>search</mat-icon>
<input matInput #filter placeholder="Search…" (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="actions">
<button mat-fab style="background-color: #281c7b;" (click)="addIssueData(null)" matTooltip="Add Issue Data"
*ngIf="showAddIssueDataIcon">
<mat-icon>add</mat-icon>
</button>
</div>
<button class="app-column-filter" type="button" mat-icon-button [matMenuTriggerFor]="columnFilter">
<mat-icon style="font-size: 130%; color: #929292 " matTooltip="Configure Table">settings</mat-icon>
</button>
<ng-content select=".actions"></ng-content>
</div>
<mat-menu #columnFilter="matMenu" yPosition="below" xPosition="before">
<button class="checkbox-item mat-menu-item" *ngFor="let column of displayedColumns"
(click)="toggleColumnVisibility(column, $event)">
<mat-checkbox [(ngModel)]="column.visible" (change)="columnFilterCheckboxClick($event)" class="checkbox"
#checkbox (click)="$event.stopPropagation();">
{{ column.name }}
</mat-checkbox>
</button>
</mat-menu>
<ng-content></ng-content>
</div>
<mat-divider></mat-divider>
<mat-table #table [dataSource]="dataSource" matSort class="tableStyle">
<!-- issueStatus Column -->
<ng-container matColumnDef="issueStatus">
<mat-header-cell *matHeaderCellDef mat-sort-header="name" style="max-width: 35%; min-width: 35%;"> STATUS
</mat-header-cell>
<mat-cell *matCellDef="let element" style="max-width: 35%; min-width: 35%;">
{{element.name}}
</mat-cell>
</ng-container>
<!-- showInBacklog Column -->
<ng-container matColumnDef="showInBacklog">
<mat-header-cell *matHeaderCellDef mat-sort-header="backlog" style="max-width: 25%; min-width: 25%;">ISSUE
STATUS
</mat-header-cell>
<mat-cell *matCellDef="let element" style="text-transform: uppercase; max-width: 25%; min-width: 25%;">
{{element.backlog}}
</mat-cell>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header="status" style="max-width: 30%; min-width: 30%;"> SHOW IN
BACKLOG </mat-header-cell>
<mat-cell *matCellDef="let element" style="text-transform: uppercase; max-width: 30%; min-width: 30%;">
{{element.status}}</mat-cell>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="action">
<mat-header-cell class="action-cell" *matHeaderCellDef style="max-width: 5%; min-width: 5%;">ACTION
</mat-header-cell>
<mat-cell class="action-cell" *matCellDef="let element; let i = index" style="max-width: 5%; min-width: 5%;">
<button mat-icon-button *ngIf="showAddIssueDataIcon" (click)="editIssueData(element)">
<mat-icon class="iconStyle" matTooltip="Edit Issue Data">edit</mat-icon>
</button>
<!-- -->
<a style="cursor: pointer" *ngIf="showEditIssue">
<i class="material-icons" style="color:#757575" [matMenuTriggerFor]="selectMenu"
matTooltip="More actions">more_vert</i></a>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item *ngIf="element.status === 'INACTIVE'"
(click)="onClickEditStatus(element , true,i)">Make Active</button>
<button mat-menu-item *ngIf="element.status === 'ACTIVE'"
(click)="onClickEditStatus(element , false,i)">Make Inactive</button>
<button mat-menu-item (click)="deleteIssueData(element,i)">Delete</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="visibleColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: visibleColumns;" class="clickable"></mat-row>
</mat-table>
<mat-paginator [pageSize]="savedPageSize" (page)="columnFilterCheckboxClick($event)"
[pageSizeOptions]="[5, 10, 20, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
并且我在CSS文件中还添加了以下CSS字段，
.mat-elevation-z8 {
display: flex;
flex-direction: column;
max-height: 500px;
width: 95%;
margin: 3% 3% 3% 3%;
overflow: auto;
}
.tableStyle{
max-height: 500px;
overflow: auto;
}
mat-header-cell, mat-header-row{
position: sticky;
top:0;
background: white;
}
现在，粘性页眉和页脚可以正常工作，并且对齐方式可以很好地对齐，
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？