欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

mat-表格未對齊的標題

謝彥文1年前7瀏覽0評論

當mat-table使用更多的列重新呈現時,它的一些標題(查看第4列和第5列與第1、2、3列和第6列不在同一行上)與其他標題不對齊,如下圖所示。我能做些什么來改善這種情況呢?

enter image description here

所有標題列都具有相似的樣式,請參見下面的元素詳細信息。

<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;
}

希望對某個人有幫助。