當mat-table使用更多的列重新呈現時,它的一些標題(查看第4列和第5列與第1、2、3列和第6列不在同一行上)與其他標題不對齊,如下圖所示。我能做些什么來改善這種情況呢?
所有標題列都具有相似的樣式,請參見下面的元素詳細信息。
<th _ngcontent-sjy-c336="" role="columnheader" mat-header-cell="" mat-sort-header="" class="mat-sort-header mat-header-cell cdk-header-cell ng-tns-c221-155 cdk-column-column2 mat-column-column2 ng-star-inserted mat-table-sticky mat-table-sticky-border-elem-top" ng-reflect-id="" aria-sort="none" style="top: 0px; z-index: 100;">
<div class="mat-sort-header-container mat-focus-indicator ng-tns-c221-155" aria-describedby="cdk-describedby-message-5" cdk-describedby-host="0" tabindex="0" role="button">
<div class="mat-sort-header-content ng-tns-c221-155"> Column2 </div>
<div class="mat-sort-header-arrow ng-trigger ng-trigger-arrowPosition ng-tns-c221-155 ng-star-inserted" style="opacity: 0; transform: translateY(25%);">
<div class="mat-sort-header-stem ng-tns-c221-155"/>
<div class="mat-sort-header-indicator ng-tns-c221-155 ng-trigger ng-trigger-indicator" style="transform: translateY(0px);">
<div class="mat-sort-header-pointer-left ng-tns-c221-155 ng-trigger ng-trigger-leftPointer" style="transform: rotate(-45deg);"/>
<div class="mat-sort-header-pointer-right ng-tns-c221-155 ng-trigger ng-trigger-rightPointer" style="transform: rotate(45deg);"/>
<div class="mat-sort-header-pointer-middle ng-tns-c221-155"/>
</div>
</div>
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
</div>
</th>
注意-我意識到我可能沒有提供一切,請讓我知道我需要分享什么,以便您可以提供您的反饋。
為了解決這個問題,我使用chrome的開發工具檢查了這個元素。我發現應用了一個非常特殊的規則,所以我必須做以下事情來得到我需要的東西。
CSS代碼-
th.mat-header-cell {
white-space: normal;
text-align: center;
}
td.mat-cell:last-of-type{
text-align-last: left;
}
希望對某個人有幫助。