关于 html：如何以angular设置 mat-table 列的宽度？

How to set width of mat-table column in angular?

在我的 mat-table 中有 6 列，当任何一列没有更多单词时，它看起来像 Image-1，但是当任何列有更多单词时，UI 看起来像 Image-2，所以如何设置 UI 像 Image- 1 当任何列在angular 6 中有更多单词时？

图像-1

enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="userimage">
<th mat-header-cell *matHeaderCellDef> # </th>
<td mat-cell *matCellDef="let element">
<img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/>
</td>
</ng-container>

<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> Full Name </th>
<td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
</ng-container>

<ng-container matColumnDef="emailid">
<th mat-header-cell *matHeaderCellDef> EmailId </th>
<td mat-cell *matCellDef="let element"> {{element.emailid}} </td>
</ng-container>

<ng-container matColumnDef="contactno">
<th mat-header-cell *matHeaderCellDef> Contact No. </th>
<td mat-cell *matCellDef="let element"> {{element.contactno}} </td>
</ng-container>

<ng-container matColumnDef="enabled">
<th mat-header-cell *matHeaderCellDef> Enabled </th>
<td mat-cell *matCellDef="let element" style="color: blue">
<ng-container *ngIf="element.enabled == 'true'; else otherss">Enabled</ng-container>
<ng-template #otherss>Disabled</ng-template>
</td>
</ng-container>

<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element" fxLayoutGap="5px">
<button mat-mini-fab color="primary" routerLink="/base/editUserDetails/{{element.userid}}"><mat-icon>edit</mat-icon></button>
<button mat-mini-fab color="primary" routerLink="/base/viewUserDetails/{{element.userid}}"><mat-icon>pageview</mat-icon></button>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50 ,100]" showFirstLastButtons></mat-paginator>

使用 css 我们可以调整我在下面的代码中输入的特定列宽。

user.component.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

table{
width: 100%;
}

.mat-column-username {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 28% !important;
width: 28% !important;
overflow-wrap: break-word;
word-wrap: break-word;

word-break: break-word;

-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

.mat-column-emailid {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 25% !important;
width: 25% !important;
overflow-wrap: break-word;
word-wrap: break-word;

word-break: break-word;

-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

.mat-column-contactno {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 17% !important;
width: 17% !important;
overflow-wrap: break-word;
word-wrap: break-word;

word-break: break-word;

-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

.mat-column-userimage {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 8% !important;
width: 8% !important;
overflow-wrap: break-word;
word-wrap: break-word;

word-break: break-word;

-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

.mat-column-userActivity {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 10% !important;
width: 10% !important;
overflow-wrap: break-word;
word-wrap: break-word;

word-break: break-word;

-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

相关讨论

如果您在样式中使用 scss，则可以使用 mixin 来帮助生成代码。如果你每次都把所有的属性都放好，你的风格很快就会失控。

这是一个非常简单的示例——实际上只是一个概念证明，您可以根据需要使用多个属性和规则对其进行扩展。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@mixin mat-table-columns($columns)
{
.mat-column-
{
@each $colName, $props in $columns {

$width: map-get($props, 'width');

&#{$colName}
{
flex: $width;
min-width: $width;

@if map-has-key($props, 'color')
{
color: map-get($props, 'color');
}
}
}
}
}

然后在定义表格的组件中执行以下操作：

1
2
3
4
5
6
7

@include mat-table-columns((

orderid: (width: 6rem, color: gray),
date: (width: 9rem),
items: (width: 20rem)

));

这会生成如下内容：

1
2
3
4
5
6
7
8

.mat-column-orderid[_ngcontent-c15] {
flex: 6rem;
min-width: 6rem;
color: gray; }

.mat-column-date[_ngcontent-c15] {
flex: 9rem;
min-width: 9rem; }

在此版本中，width 变为 flex: value; min-width: value。

对于您的具体示例，您可以添加 wrap: true 或类似的东西作为新参数。

相关讨论

正如我已经实施的那样，它运行良好。您只需要使用 matColumnDef="description"

添加列宽

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<mat-table #table [dataSource]="dataSource" matSortDisableClear>
<ng-container matColumnDef="productId">
<mat-header-cell *matHeaderCellDef>product ID</mat-header-cell>
<mat-cell *matCellDef="let product">{{product.id}}</mat-cell>
</ng-container>
<ng-container matColumnDef="productName">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let product">{{product.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
<mat-cell *matCellDef="let product">
<button (click)="view(product)">
<mat-icon>visibility</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

这里 matColumnDef 是
productId、productName 和 action

现在我们通过 matColumnDef

应用宽度

造型

1
2
3
4
5
6

.mat-column-productId {
flex: 0 0 10%;
}
.mat-column-productName {
flex: 0 0 50%;
}

剩余的宽度平均分配给其他列

相关讨论

你可以很容易地做到这一点。在每一列中，您将获得一个字段名称以 mat-column 为前缀的类，因此该类将类似于 mat-column-yourFieldName。因此，您可以设置如下样式

1
2
3
4

.mat-column-yourFieldName {
flex: none;
width: 100px;
}

所以我们可以根据我们的要求给列固定宽度。

希望这对某人有所帮助。

相关讨论

你可以使用下面的 CSS 来做到这一点：

1
2
3
4
5
6
7
8
9
10
11

table {
width: 100%;
table-layout: fixed;
}

th, td {
overflow: hidden;
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
}

这是一个带有示例数据

的StackBlitz Example

相关讨论

这是解决问题的另一种方法：

与其尝试"在帖子中修复它"，为什么不在表格需要尝试将其放入其列之前截断描述？我是这样做的：

1
2
3
4
5
6

<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> {{ 'Parts.description' | translate }} </th>
<td mat-cell *matCellDef="let element">
{{(element.description.length > 80) ? ((element.description).slice(0, 80) + '...') : element.description}}
</td>
</ng-container>

所以我首先检查数组是否大于某个长度，如果是，则截断并添加 \\'...\\' 否则按原样传递值。这使我们仍然可以从表格的自动间距中受益 :)

enter

相关讨论

我们可以直接将属性宽度添加到th

例如：

1
2
3
4

<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef width ="20%"> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

相关讨论

在此处输入图像描述我有一个有四列的表格。请看截图。在 scss 文件中，我包含以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.full-width-table {
width: 100%;
}
.mat-column-id {
width: 15% !important;
}
.mat-column-question {
width: 55% !important;
}
.mat-column-view {
width: 15% !important;
}
.mat-column-reply {
width: 15% !important;
}

相关讨论

只需要更新th标签的宽度即可。

1
2
3

th {
width: 100px;
}

相关讨论

如果您想为特定列提供固定宽度，您可以将 fxFlex="60px" 同时添加到 mat-cell 和 mat-header-cell。

您可以使用 fixedLayout="true" 属性，例如 <table #table mat-table [dataSource]="dataSource" fixedLayout="true">

fixedLayout : 是否使用固定的表格布局。启用此选项将强制使用一致的列宽并优化本机表的呈现粘性样式。弹性表的无操作。

只需将 style="width:5% !important;" 添加到 th 和 td

1
2
3
4

<ng-container matColumnDef="username">
<th style="width:5% !important;" mat-header-cell *matHeaderCellDef> Full Name </th>
<td style="width:5% !important;" mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
</ng-container>

相关讨论

只需在标签表中添加类 full-width-table。

例如
<table mat-table class="full-width-table" [dataSource]="dataSource">