Html 如何以角度设置垫表列的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53020792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set width of mat-table column in angular?
提问by DDD
Here in my mat-table have 6 column when any column has not more words then it looks like Image-1, but when any column has more words then UI looks like Image-2, so how to set UI like Image-1 when any column has more words in angular 6 ?
在我的 mat-table 中有 6 列，当任何列没有更多单词时，它看起来像 Image-1，但是当任何列有更多单词时，UI 看起来像 Image-2，那么如何在任何情况下设置像 Image-1 这样的 UI角度 6 中的列有更多单词？
Image-1
图 1
Image-2
图 2
user.component.html
用户组件.html
<div class="mat-elevation-z8">
<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>
回答by DDD
using css we can adjust specific column width which i put in below code.
使用 css 我们可以调整我在下面代码中输入的特定列宽。
user.component.css
用户组件.css
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;
}
回答by Simon_Weaver
If you're using scss for your styles you can use a mixin to help generate the code. Your styles will quickly get out of hand if you put all the properties every time.
如果您在样式中使用 scss，则可以使用 mixin 来帮助生成代码。如果每次都放置所有属性，您的样式将很快失控。
This is a very simple example - really nothing more than a proof of concept, you can extend this with multiple properties and rules as needed.
这是一个非常简单的示例 - 实际上只不过是一个概念证明，您可以根据需要使用多个属性和规则对其进行扩展。
@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');
}
}
}
}
}
Then in your component where your table is defined you just do this:
然后在定义表的组件中，您只需执行以下操作：
@include mat-table-columns((
orderid: (width: 6rem, color: gray),
date: (width: 9rem),
items: (width: 20rem)
));
This generates something like this:
这会生成如下内容：
.mat-column-orderid[_ngcontent-c15] {
flex: 6rem;
min-width: 6rem;
color: gray; }
.mat-column-date[_ngcontent-c15] {
flex: 9rem;
min-width: 9rem; }
In this version widthbecomes flex: value; min-width: value.
在这个版本中width变成flex: value; min-width: value.
For your specific example you could add wrap: trueor something like that as a new parameter.
对于您的具体示例，您可以添加wrap: true或类似的内容作为新参数。
回答by Prashant Pimpale
You can do it by using below CSS:
您可以使用以下 CSS 来实现：
table {
width: 100%;
table-layout: fixed;
}
th, td {
overflow: hidden;
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
}
Here is a StackBlitz Examplewith Sample Data
这是一个StackBlitz Example带有示例数据的
回答by Sandeep Patel
As i have implemented, and it is working fine. you just need to add column width using matColumnDef="description"
正如我所实施的，它运行良好。您只需要使用添加列宽matColumnDef="description"
for example :
例如 ：
<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>
here matColumnDefis
productId, productNameand action
这matColumnDef是
productId，productName并且action
now we apply width by matColumnDef
现在我们应用宽度 matColumnDef
styling
造型
.mat-column-productId {
flex: 0 0 10%;
}
.mat-column-productName {
flex: 0 0 50%;
}
and remaining width is equally allocated to other columns
剩余宽度平均分配给其他列
回答by rakesh
we can add attribute widthdirectly to th
我们可以 直接给 th添加属性宽度
eg:
例如：
<ng-container matColumnDef="position" >
<th mat-header-cell *matHeaderCellDef width ="20%"> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
回答by Nelis Brink
Here's an alternative way of tackling the problem:
这是解决问题的另一种方法：
Instead of trying to "fix it in post" why don't you truncate the description before the table needs to try and fit it into its columns? I did it like this:
为什么不在表需要尝试将其放入其列之前截断描述，而不是尝试“在后期修复它”？我是这样做的：
<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>
So I first check if the array is bigger than a certain length, if Yes then truncate and add '...' otherwise pass the value as is. This enables us to still benefit from the auto-spacing the table does :)
所以我首先检查数组是否大于某个长度，如果是，则截断并添加 '...' 否则按原样传递值。这使我们仍然可以从表格的自动间距中受益:)
回答by Kiran Shetty
You can easily do this one. In each column you will get a class with the field name prefixed with mat-column, so the class will be like mat-column-yourFieldName. So for that you can set the style like following
你可以很容易地做到这一点。在每一列中，您将获得一个字段名称以 mat-column 为前缀的类，因此该类将类似于 mat-column-yourFieldName。因此，您可以设置如下样式
.mat-column-yourFieldName {
flex: none;
width: 100px;
}
So we can give fixed width for column as per our requirement.
所以我们可以根据我们的要求为列提供固定宽度。
Hope this helps for someone.
希望这对某人有帮助。
