如何以角度设置垫表列的宽度? [英] How to set width of mat-table column in angular?
本文介绍了如何以角度设置垫表列的宽度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里在我的 mat-table 中有 6 列，当任何列的单词都不多时，它看起来像 Image-1，但是当任何列有更多的单词时，UI 看起来像 Image-2，那么如何将 UI 设置为 Image-1 当任何列在角度 6 中有更多单词时?
图像 1
图像 2
user.component.html
<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-容器><ng-container matColumnDef="用户名"><th mat-header-cell *matHeaderCellDef>全名</th><td mat-cell *matCellDef="let element">{{element.username}} ( {{element.usertype}} )</td></ng-容器><ng-container matColumnDef="emailid"><th mat-header-cell *matHeaderCellDef>电子邮件 ID </th><td mat-cell *matCellDef="let element">{{element.emailid}} </td></ng-容器><ng-container matColumnDef="contactno"><th mat-header-cell *matHeaderCellDef>联系电话<td mat-cell *matCellDef="let element">{{element.contactno}} </td></ng-容器><ng-container matColumnDef="已启用"><th mat-header-cell *matHeaderCellDef>启用<td mat-cell *matCellDef="let element" style="color: blue"><ng-container *ngIf="element.enabled == 'true'; else otherss">Enabled</ng-container><ng-template #otherss>禁用</ng-template></td></ng-容器><ng-container matColumnDef="action"><th mat-header-cell *matHeaderCellDef>动作<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-容器><tr mat-header-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr><mat-paginator [pageSizeOptions]="[5, 10, 20, 50,100]" showFirstLastButtons></mat-paginator>
解决方案 使用 css 我们可以调整我在下面代码中输入的特定列宽.
user.component.css
table{宽度:100%；}.mat-column-username {自动换行:断字！重要；空白:未设置！重要；弹性:0 0 28% ！重要；宽度:28%！重要；溢出包装:断字；自动换行:断字；断字:断字；-ms-连字符:自动；-moz-连字符:自动；-webkit-连字符:自动；连字符:自动；}.mat-column-emailid {自动换行:断字！重要；空白:未设置！重要；弹性:0 0 25% ！重要；宽度:25%！重要；溢出包装:断字；自动换行:断字；断字:断字；-ms-连字符:自动；-moz-连字符:自动；-webkit-连字符:自动；连字符:自动；}.mat-column-contactno {自动换行:断字！重要；空白:未设置！重要；弹性:0 0 17% ！重要；宽度:17%！重要；溢出包装:断字；自动换行:断字；断字:断字；-ms-连字符:自动；-moz-连字符:自动；-webkit-连字符:自动；连字符:自动；}.mat-column-userimage {自动换行:断字！重要；空白:未设置！重要；弹性:0 0 8% ！重要；宽度:8%！重要；溢出包装:断字；自动换行:断字；断字:断字；-ms-连字符:自动；-moz-连字符:自动；-webkit-连字符:自动；连字符:自动；}.mat-column-userActivity {自动换行:断字！重要；空白:未设置！重要；弹性:0 0 10% ！重要；宽度:10%！重要；溢出包装:断字；自动换行:断字；断字:断字；-ms-连字符:自动；-moz-连字符:自动；-webkit-连字符:自动；连字符:自动；}
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 ?
Image-1
Image-2
user.component.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>
解决方案 using css we can adjust specific column width which i put in below code.
user.component.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;
}
这篇关于如何以角度设置垫表列的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
