md-table - 如何更新列宽

Question

我已经开始将md-table用于我的项目,我想要固定的列宽.目前所有列宽度都分为相同的大小.

我在哪里可以获得数据表维度的文档？

https://material.angular.io/components/table/overview

Answer 1

当Material创建表时,它会自动为您应用两个类名,您可以使用这两个类来为每个列设置样式.在样式下面的例子中被命名为mat-column-userId和cdk-column-userId.

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

现在您可以在css中使用这些名称:

.mat-column-userId {
  flex: 0 0 100px;
}

与Rahul Patil的答案类似,但您不需要在列定义中添加另一个类.

Answer 2

目前,它尚未在API级别公开.但是你可以用类似的东西来实现它

<ng-container cdkColumnDef="userId" >
  <md-header-cell *cdkHeaderCellDef [ngClass]="'customWidthClass'"> ID </md-header-cell>
  <md-cell *cdkCellDef="let row" [ngClass]="'customWidthClass'"> {{row.id}} </md-cell>
</ng-container>

在css中,您需要添加此自定义类 -

.customWidthClass{
   flex: 0 0 75px;
}

您可以随意输入逻辑以在此处附加类或自定义宽度.它将为列应用自定义宽度.

由于md-table使用flex,我们需要以flex方式给出固定宽度.这只是解释 -

0 =不增长(弹性增长的简写)

0 =不收缩(弹性收缩的简写)

75px =从75px开始(弹性基础的简写)

Plunkr在这里 - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

Answer 3

如果在项目中使用angular/flex-layout,则可以通过向mat-h​​eader-cell和mat-cell 添加fxFlex指令来设置列:

 <ng-container matColumnDef="name" >
      <mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell  fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
 </ng-container>

否则,您可以添加自定义CSS以实现相同的结果:

.mat-column-name{
    flex: 0 0 100px;
}

Answer 4

请查看:https://github.com/angular/material2/issues/5808

由于material2使用flex布局,因此您只需将fxFlex="40"(或fxFlex所需的值)设置为md-cell和md-header-cell.

Answer 5

我发现jymdman和Rahul Patil的组合答案对我来说是最好的:

.mat-column-userId {
  flex: 0 0 75px;
}

此外,如果您有一个"领先"列,您希望始终在不同设备上占用一定的空间,我发现以下非常方便采用更具响应性的可用容器宽度(这会强制其余列为均匀使用剩余空间):

.mat-column-userName {
  flex: 0 0 60%;
}

Answer 6

该角材料文档使用

.mat-column-userId {
    max-width: 40px;
}

为其表组件更改列宽.同样,userId将是单元名称.

Answer 7

我正在使用FlexLayout根据FlexLayout为我们提供的查询媒体更新列宽.

fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"

表示默认情况下此列将使用行宽的30%,当满足gt-xs @mediaQuery时,新宽度将为15%,其他条件的行为类似

<!-- CURRENTBALANCE COLUMN-->
  <ng-container cdkColumnDef="balance_2">
    <mat-header-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20"
       fxFlex.gt-md="25" fxLayout="row" fxLayoutAlign="center center"
       *cdkHeaderCellDef>{{ balanceTable.datesHeaders[2] }}</mat-header-cell>
    <mat-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25" 
      *cdkCellDef="let eventTop">
      <div fxLayout="column" fxLayoutAlign="center center">
        <!-- CELL_CONTENT-->
      </div>
    </mat-cell>
  </ng-container>
<!-- CURRENTBALANCE COLUMN-->

>阅读有关FlexLayout和@MediaQueries的更多信息,请访问https://github.com/angular/flex-layout/wiki/Responsive-API

Answer 8

我只是用过：

th:nth-child(4) {
    width: 10%;
}

将4替换为您需要调整宽度的标题的位置。所用文档中的示例：

td, th {
  width: 25%;
}

因此，我只是对其进行了修改以获得我想要的。