gpt4 book ai didi

css - 将 Angular Material 表中的一个 mat-h​​eader-cell 与排序标题右对齐

转载 作者:太空狗 更新时间:2023-10-29 18:22:04 26 4
gpt4 key购买 nike

我正在尝试将表格中的一个标题对齐。我试过了:

.header-align-right {
display: flex;
justify-content: flex-end;
}

在一个类中并将其添加到mat-h​​eader-cell。这使文本正确对齐,但也为元素添加了奇怪的间距,使其与标题的其余部分不对齐。在没有 display:flex 的情况下也尝试过,但没有任何效果。

<ng-container matColumnDef="Number">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Number</th>
<td mat-cell *matCellDef="let row" align="right">{{row.Number}}</td>
<td mat-footer-cell *matFooterCellDef></td>
</ng-conIainer>

如您所见,我将单元格的内容右对齐,我也想对齐标题。

最佳答案

当使用 <mat-header-cell> 时,单元格对齐默认通过 flexbox 完成和 <mat-cell> , 但在使用 <th mat-header-cell><td mat-cell> .使用表格元素时,对齐是用 text-align 完成的。 .如果你一直强制 flexbox,表格单元格使用 thtd有可能失去与表格其余部分的垂直对齐。

我发现设置 text-align: right 的组合和设置 justify-content: flex-end效果最好。这样,带有 display:table-cell 的元素使用 text-align , 和带有 display:flex 的元素使用 justify-content .

以你的例子为例:

.header-align-right {
text-align: right;
justify-content: flex-end;
}

要使箭头显示在标题之前,您应该使用 arrowPosition 属性。

此外,我建议使用自动添加的列类( .mat-column- + 区分大小写的值 matColumnDef )而不是添加 class="header-align-right" .这将对齐页眉、单元格和页脚。所以这是我的建议:

.mat-column-Number {
text-align: right;
justify-content: flex-end;
}
<ng-container matColumnDef="Number">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Number</th>
<td mat-cell *matCellDef="let row">{{row.Number}}</td>
<td mat-footer-cell *matFooterCellDef></td>
</ng-conIainer>

关于css - 将 Angular Material 表中的一个 mat-h​​eader-cell 与排序标题右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55118456/

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