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's answer类似，但您无需在列定义中添加其他类。

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 ，则可以通过将 fxFlex 指令添加到mat-header-cell和mat-cell来设置列：

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

另外，如果你有一个＆＃34;领先＆＃34;你希望在不同设备上占据一定空间的列，我发现以下非常方便采用更具响应性的可用容器宽度（这会强制其余列均匀地使用剩余空间）：

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

Answer 6

我正在使用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-->

> 在https://github.com/angular/flex-layout/wiki/Responsive-API

上了解有关FlexLayout和@MediaQueries的更多信息。

Answer 7

Angular material documentation使用

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

为其表组件更改列宽。再次，userId将是单元格名称。

Answer 8

我刚刚使用过：

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

将4替换为您需要调整宽度的标题的位置。使用的examples in the documentation：

td, th {
  width: 25%;
}

所以我刚刚对其进行了修改，以获得我想要的。

Answer 9

您可以将.mat-cell类设置为flex：0 0 200px;而不是flex：1和nth-child一起使用。

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}

Answer 10

你现在可以这样做

<cdk-cell [style.flex]="'0 0 75px'">

Answer 11

您还可以使用元素选择器：

mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
    flex: 0 0 64px;
}

但在大多数情况下，jymdman's answer是最值得推荐的方式。

Answer 12

我得到了非常简单的解决方案：通过覆盖单元格和标题单元格为样式表中的列设置不同的宽度：

Example: setting custom width for 1st and 5th column:-
.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1),
{
flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5),
{
flex: 0 0 10%;
}

github

Answer 13

如果需要，还可以直接在标记中添加样式：

<ng-container matColumnDef="Edit">
     <th mat-header-cell *matHeaderCellDef > Edit </th>
     <td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>

Answer 14

您应该在fxFlex和th的“ @ angular / flex-layout”中使用td，如下所示：

<ng-container matColumnDef="value">
      <th mat-header-cell fxFlex="15%" *matHeaderCellDef>Value</th>
            <td mat-cell *matCellDef="let element" fxFlex="15%" fxLayoutAlign="start center">
                           {{'value'}}
            </td>
</ng-container>

Answer 15

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

Answer 16

如果表列过多，并且没有使用md-table在角度表中进行调整，则将以下样式粘贴到component.css文件中。水平滚动视图时，它将像超级按钮一样工作。

.mat-table__wrapper .mat-table {
    min-width: auto !important;
    width: 100% !important; }

.mat-header-row {
    width: 100%; }

.mat-row {
    width: 100%;
}

添加此样式可单独更改您的列。

.mat-column-{colum-name} {
    flex: 0 0 25% !important;
    min-width: 104px !important;
}

或者检查this link，（上面的代码来自哪里），以获取更多详细信息。

Answer 17

示例Mat-table列和相应的CSS：

HTML /模板

<ng-container matColumnDef="">
  <mat-header-cell *matHeaderCellDef>
     Wider Column Header
  </mat-header-cell>
  <mat-cell *matCellDef="let displayData">
    {{ displayData.value}}
  </mat-cell>`enter code here`
</ng-container>

CSS

.mat-column-courtFolderId {
    flex: 0 0 35%;
}

Answer 18

让我们举个例子。如果您的表中的列如下：

func (service *Service) CheckUsernameUniqueness(ctx context.Context, username string) (bool, error) {
    iter := service.Client.Collection("users").Where("username", "==", username).Documents(ctx)

    usernameExists := false
    for {
        _, err := iter.Next()
        if err == iterator.Done {
            break
        }
        if err != nil {
            return false, err
        }
        usernameExists = true
        break
    }

    return !usernameExists, nil
}

因为它包含两列。然后我们可以使用

设置列的宽度

<!-- ID Column -->
  <ng-container matColumnDef="id" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let row"> {{row.sid}} </td>
  </ng-container>

 <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

在此示例中，我们采用

.mat-column-<matColumnDef-value>{
    width: <witdh-size>% !important;
}

md-table - 如何更新列宽

18 个答案: