html - 制作 CSS : "resize: horizontal" work with Mat-Table on firefox

Question

我有一个 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 上时，拖动框根本就没有出现。

<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 表格，调整大小工作正常。

Answer 1

使用此代码

Stackblitz Demo

component.scss/component.css

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

component.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>