Сделать CSS: "resize: горизонтальный" работать с Mat-Table на Firefox

Question

У меня есть таблица соответствия и я хотел изменить размер столбцов, поэтому я наткнулся на свойство 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 (тот же CSS, что и для простого HTML) в качестве класса, предполагая, что в этом проблема.

Что я делаю не так, или может быть так, что эта функция просто не работаетвообще работать с Mat-Tables?

[EDIT:] благодаря @KrishnaRathore Теперь я знаю, что мой код (вероятно) не проблема, а Firefox есть.Если вы довольны Chrome, посмотрите его ответ, он работает.

HOWEVER , эта проблема, кажется, уникальна для Mat-Table, так как есть еще одна небольшая простая таблица HTML вМой проект, с которым отлично работает изменение размера.

Answer 1

используйте этот код

Демонстрация Stackblitz

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>

Answer 2

Я заставил это работать (даже на Firefox), но я абсолютно уверен, что я пробовал это раньше, а потом просто не получилось.

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

, поэтому хитрость заключается в том, чтобы получить еще один div INSIDEячейка заголовка, которая может быть изменяемого размера, чтобы не изменять размер остальных.