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

如果您在项目中使用角度/弹性布局，您可以通过将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;
}

此外，如果您有一个"前导"列，您希望在不同设备上始终占用一定数量的空间，我发现以下内容非常方便，可以以响应更快的方式采用可用的容器宽度(这会迫使其余列均匀地使用剩余空间(：

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

Answer 6

Angular 材质文档使用

.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 at https://github.com/angular/flex-layout/wiki/Responsive-API

Answer 8

我刚刚使用了：

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

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

td, th {
width: 25%;
}

所以我只是修改它以获得我想要的。

Answer 9

您可以将 .mat-cell 类设置为 flex： 0 0 200px;而不是 flex： 1 和第 n 个子项。

.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

您可以在th中使用"@angular/flex-layout"中的fxFlex，并像这样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>
</th>
</ng-container>

Answer 12

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

Answer 13

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

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

但在大多数情况下，jymdman的答案是最推荐的方法。

Answer 14

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

网页/模板

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

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

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

或者，请查看此链接(上述代码的来源(以获取更多详细信息。

Answer 17

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

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

对于此示例，我们采用

.mat-column-id{
width: 20% !important;      
}
.mat-column-name{
width: 80% !important;
}

Answer 18

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

示例 - 设置第一列和第 5 列的自定义宽度：

.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