angular-material - mat-table 如何将 mat-header 与 mat-cell 宽度对齐
问题描述
我是 flex 的新手,我的垫子桌做得很好。不幸的是,我的标题没有跟随我的单元格宽度。
这是我的结果图片。
如您所见,我的标题与我的单元格不对齐。
这是我的 CSS 代码,就像我说我是新人一样,所以也许我错过了一些东西。
@import "./../../styles.scss";
.mat-header-row {
width: 100%;
min-height: 20px;
padding: 0px 0px 0px 4px;
}
.mat-row {
width: 100%;
min-height: 12px;
display: inline-flex;
// min-width: 100%;
}
.mat-header-cell {
justify-content: left;
font-size: smaller;
font-weight: bold;
padding: 0px 0px 0px 4px;
}
.mat-cell {
justify-content: left;
border-top: 1px solid crimson;
font-size: smaller;
padding: 0px 0px 0px 4px;
text-align: left;
align-items: flex-start;
}
.mat-cell-points {
flex: 0 0 20px !important;
white-space: unset !important;
}
.mat-cell-concession{
flex: 0 0 200px !important;
white-space: unset !important;
justify-content: left;
border-top: 1px solid crimson;
font-size: smaller;
padding: 0px 0px 0px 4px;
text-align: left;
}
.rcorner1 {
border-radius: 25px;
background: mat-color($accent, 300);
padding: 20px;
}
.example-container {
display: flex;
flex-direction: column;
// min-width: 200px;
max-width: 380px;
}
label {
min-width: 15%;
}
.mat-row:nth-child(1n + 1) {
background-color: mat-color($accent, lighter);
}
.mat-row:not(:nth-child(2n + 1)) {
background-color: mat-color($primary, 300);
}
.example-element-row:hover {
background: mat-color($accent, 800);
}
.example-element-row:active {
background: #efefef;
}
还有我的 HTML 代码:
<div class="example-container mat-elevation-z8 alternate-theme mat-app-background" color="primary">
<div class="mat-header-cell">
{{ this.getTypeInfo(this.typeList.TypeBourse) }}
</div>
<mat-table [dataSource]="bourseDetail" class="mat-elevation-z8">
<!-- https://stackoverflow.com/questions/53084892/angular-material-table-cell-formatting/53096778 -->
<!-- Position Column -->
<ng-container matColumnDef="Position">
<mat-header-cell *matHeaderCellDef matTooltip="Position"> # </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.Position }}</mat-cell>
</ng-container>
<!-- Concession Column -->
<ng-container matColumnDef="nom">
<mat-header-cell *matHeaderCellDef>Concession</mat-header-cell>
<mat-cell class="mat-cell-concession" *matCellDef="let element">
<ng-container *ngIf="element.Concession.Nom; else elseBlock">
{{ element.Concession.Nom }}
<ng-template #elseBlock>Content to render when condition is false.</ng-template>
</ng-container>
</mat-cell>
</ng-container>
<!-- Points Column -->
<ng-container matColumnDef="Points">
<mat-header-cell *matHeaderCellDef>points</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.Points }}</mat-cell>
</ng-container>
<!-- Amount Column -->
<ng-container matColumnDef="Montant">
<mat-header-cell *matHeaderCellDef>Gain</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.Montant | currency }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" class="example-element-row"></mat-row>
</mat-table>
</div>
谢谢你的帮助
解决方案
这是我现在可以使用的代码:
<div class="example-container mat-elevation-z8 alternate-theme mat-app-background" color="primary"
style="width: 450px;">
<div class="div-title">
{{ this.annee }} - {{ this.getTypeInfo(this.typeList.TypeBourse) }}
</div>
<mat-table [dataSource]="bourseDetail" class="mat-elevation-z8">
<!-- https://stackoverflow.com/questions/53084892/angular-material-table-cell-formatting/53096778 -->
<!-- Position Column -->
<ng-container matColumnDef="Position">
<mat-header-cell class="mat-cell" *matHeaderCellDef matTooltip="Position"> Pos </mat-header-cell>
<mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Position }}</mat-cell>
</ng-container>
<!-- Concession Column -->
<ng-container matColumnDef="nom">
<mat-header-cell class="mat-cell-concession" *matHeaderCellDef>Concession</mat-header-cell>
<mat-cell class="mat-cell-concession mat-cell-column" *matCellDef="let element">
<ng-container *ngIf="element.Concession.Nom">
{{ element.Concession.Nom }}
</ng-container>
<ng-container *ngIf="!element.Concession.Nom">
Info manquante
</ng-container>
</mat-cell>
</ng-container>
<!-- Points Column -->
<ng-container matColumnDef="Points">
<mat-header-cell class="mat-cell" *matHeaderCellDef>points</mat-header-cell>
<mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Points }}</mat-cell>
</ng-container>
<!-- Amount Column -->
<ng-container matColumnDef="Montant">
<mat-header-cell class="mat-cell" *matHeaderCellDef>Gain</mat-header-cell>
<mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Montant | currency }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" class="example-element-row"></mat-row>
</mat-table>
以及 CSS 文件:@import "./../../styles.scss";
.mat-table {
width: 100%;
}
.mat-row {
width: 100%;
min-height: 12px;
}
.div-title {
text-align: center;
font-size: medium;
font-weight: bold;
padding: 4px;
}
.mat-header-cell {
min-height: 12px;
font-size: smaller;
font-weight: bold;
}
.mat-header-row {
width: 100%;
min-height: 10px;
padding: 0px 0px 0px 4px;
}
.mat-cell-column {
border-top: 1px solid crimson;
}
.mat-cell {
flex: 0 0 50px !important;
white-space: unset !important;
justify-content: left;
font-size: smaller;
padding: 0px 0px 0px 4px;
text-align: left;
}
.mat-cell-concession {
flex: 0 0 250px !important;
min-width: 250px !important;
white-space: unset !important;
justify-content: left;
font-size: smaller;
padding: 0px 0px 0px 4px;
text-align: left;
color: black;
}
.mat-row:nth-child(1n + 1) {
background-color: mat-color($accent, lighter);
}
.mat-row:not(:nth-child(2n + 1)) {
background-color: mat-color($primary, 300);
}
.example-element-row:hover {
background: mat-color($accent, 800);
}
.example-element-row:active {
background: #efefef;
}
推荐阅读
- python - 使用 scrapy-splash 抓取 javascript 生成的结果
- asp.net-core - appsettings.{ENVIRONMENT}.json 未转换 - 将 asp.net 5 Web 应用程序部署到 IIS
- amazon-web-services - 通过复制规则进行跨账户 S3 存储桶复制
- codeigniter - 将函数获取到其他函数模型 codeigniter 使我的数据表显示长度不起作用
- vue.js - 使用 Vuex 模块更好,还是拥有多个商店?
- r - 箱线图 y 轴上的自定义刻度数
- datatable - 为什么我不能使用 gtsummary 制作表格?
- java - 使用 Gradle 创建具有多层 jar 文件的优化 docker 映像
- node.js - 如果用户 DM 机器人,discord.js 机器人会向 DM 发送垃圾邮件
- mysql - MySQL中`with xxx AS()`的等效语法是什么