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

Answer 2

我已经做到了（即使在firefox上也可以），但是我可以肯定的是，我之前曾经尝试过，但是后来却没有。

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

所以诀窍是在标头单元格内有另一个div，它可以调整大小，而其余部分则不能调整大小。

使CSS：“调整大小：水平”在firefox上与Mat-Table一起使用

2 个答案: