如何设置垫表栏宽度的角度? ？

在我的垫子表中有6列，当任何列没有更多的单词时，它看起来像 Image-1，但是当任何列有更多的单词时，UI 看起来像 Image-2，所以当任何列有更多的单词在角度6时，如何设置 UI 像 Image-1？

图片-1

enter image description here

图2

enter image description here

用户。组件

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

322003 次浏览
小开

你可以使用下面的 CSS:

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


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

下面是带有样本数据的 StackBlitz Example

小开
最佳答案

使用 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;
}
小开

如果您正在为样式使用 scss，那么您可以使用 Mixin 来帮助生成代码。如果你每次都把所有的属性放进去，你的样式很快就会失控。

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

    @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');
}
}
}
}
}

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

    @include mat-table-columns((
    

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

));

这就产生了这样的结果:

    .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或类似的东西作为一个新参数。

小开

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

例如:

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

以下是解决这个问题的另一种方法:

与其试图“在后期修复它”，为什么不在表需要尝试将其放入其列之前截断描述呢？我是这样做的:

<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 image description here

小开

正如我已经实现，它的工作很好。你只需要添加列宽度使用 matColumnDef="description"

例如:

<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

造型

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

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

小开

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

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

所以我们可以根据我们的要求给柱子定宽度。

希望这对某人有帮助。

小开

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

th {
width: 100px;
}
小开

把 style="width:5% !important;"加到 这个和 TD

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

小开

您可以像 <table #table mat-table [dataSource]="dataSource" fixedLayout="true">一样使用 fixedLayout="true"属性

FixedLayout: 是否使用固定表布局。启用此选项将强制执行一致的列宽度，并优化本机表的呈现粘性样式。弹性桌子不能用。

小开

在这里输入图像描述 我有一个有四列的表。请看截图。在 scss 文件中，我包含了以下代码:

.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;
}
小开

如果你想给一个特定的列一个固定的宽度，你可以添加 fxFlex="60px"到 mat-cell和 mat-header-cell。

小开

低于 CSS 的班级工作角度为13.2.3

.width-textArea {
width: 150px;
max-width: 150px;
word-wrap: break-word;
}

类需要在 < th 和 < Td 中指定

 <ng-container matColumnDef="comments">
<th class="width-textArea" mat-header-cell *matHeaderCellDef mat-sort-header class="TableHeaderRow">Comments</th>
<td class="width-textArea" mat-cell *matCellDef="let element"> \{\{element.comments}} </td>
</ng-container>

提交答案