1

我有一个 mat-table 并希望使列可调整大小,所以我偶然发现了 CSS 属性“resize”,它非常适用于常规 HTML 表

基本 HTML:

 <table id="main_table">
          <tr class="header">
            <td><div class="tableHeaderCellDiv">Tech Name</div></td>
            <td><div class="tableHeaderCellDiv">Name</div></td>
           </tr>
   </table>

CSS:

.tableHeaderCellDiv { resize: horizontal;  overflow:hidden;}

这为标题提供了一个非常好的框,您可以使用它调整列的大小。然而,当试图把这个完全相同的东西带到我的垫子上时,拖动框根本没有出现。

<table mat-table [dataSource]="items" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumnsMAT">
    <th mat-header-cell class="custom-mat-header-styling tableHeaderCellDiv" *matHeaderCellDef>{{column}}</th>
  </ng-container>

  <tr mat-header-row class="tableHeaderCellDiv" *matHeaderRowDef="displayedColumnsMAT; sticky: true;" ></tr><!-- for the header row -->
</table>

我已经删除了这两个示例的非标题行,因为它们现在无关紧要。我还尝试将 tableHeaderCellDiv (与纯 HTML 相同的 CSS)作为一个类插入到任何地方,猜测这就是问题所在。

我做错了什么,还是该功能根本不适用于 Mat-Tables?

[编辑:]感谢@KrishnaRathore,我现在知道我的代码(可能)不是问题,但 Firefox 是。如果您对 Chrome 感到满意,请查看他的答案,它可以工作。

但是,这个问题似乎是 Mat-Table 独有的,因为我的项目中有另一个小的纯 HTML 表,可以很好地调整大小。

4

2 回答 2

1

使用此代码

Stackblitz 演示

组件.scss / 组件.css

.tableHeaderCellDiv { 
    resize: horizontal;  
    overflow:hidden;
}

组件.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th mat-header-cell class="custom-mat-header-styling tableHeaderCellDiv" *matHeaderCellDef>{{column}}</th>
        <td mat-cell *matCellDef="let element">{{element[column]}}</td>
    </ng-container>

    <tr mat-header-row class="tableHeaderCellDiv" *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
于 2019-04-26T10:21:33.870 回答
0

我已经让它工作了(即使在 Firefox 上),但我绝对确定我之前尝试过这个,然后它就没有。

<th mat-header-cell class="custom-mat-header-styling" *matHeaderCellDef><div class="tableHeaderCellDiv">{{column}} </div></th>

所以诀窍是在标题单元格内有另一个 div,它是可调整大小的,而不是使其余部分可调整大小。

于 2019-04-26T10:50:43.873 回答