时间戳

首页 > 解决方案 > 使 CSS：“调整大小：水平”在 Firefox 上与 Mat-Table 一起工作

html - 使 CSS：“调整大小：水平”在 Firefox 上与 Mat-Table 一起工作

问题描述

我有一个 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 表，可以很好地调整大小。

标签： htmlcssangularresizablemat-table

解决方案

使用此代码

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>

推荐阅读