gpt4 book ai didi

angular-material - mat-table 如何将 mat-h​​eader 与 mat-cell 宽度对齐

转载 作者:行者123 更新时间:2023-12-04 10:10:13 28 4
gpt4 key购买 nike

我是 flex 的新手,我的垫子 table 做得很好。
不幸的是,我的标题没有遵循我的单元格宽度。

这是我的结果的图片。

enter image description here

如您所见,我的标题与我的单元格不对齐。

这是我的 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;
}

关于angular-material - mat-table 如何将 mat-h​​eader 与 mat-cell 宽度对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61363652/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com