Question

在我的mat-table中有6列，当任何一列没有更多的单词时，它看起来像Image-1；但是当任何一列有更多单词时，UI看起来像Image-2，那么如何设置UI就像Image-当任何一列的第6个角中有更多单词时为1？

图片1

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

Answer 1

正如我已经实现的那样，它工作正常。您只需要使用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%;
}

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

Answer 2

您可以轻松地做到这一点。在每一列中，您将获得一个字段名称以mat-column开头的类，因此该类将类似于mat-column-yourFieldName。因此，您可以按照以下方式设置样式

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

因此我们可以根据需要为列提供固定宽度。

希望这对某人有帮助。

Answer 3

如注释中所述，您可以使用CSS来实现。

使用：

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

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

这是一个带有示例数据的StackBlitz Example

Answer 4

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

为什么要在表需要尝试使其适合其列之前才截断描述，而不是尝试“在后期修复”？我是这样做的：

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

因此，我首先检查数组是否大于某个长度，如果是，则截断并添加'...'，否则按原样传递值。这使我们仍然可以从自动调整表空间中受益：）

Answer 5

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

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

Answer 6

只需更新th标签的宽度。

th {
  width: 100px;
}

Answer 7

只需将 style="width:5% !important;" 添加到 th 和 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>

Answer 8

如果您使用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或类似的内容作为新参数。

Answer 9

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

例如：

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

Answer 10

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

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

Answer 11

enter image description here我有一个四列的表格。请看截图。在 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;
}

Answer 12

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

Answer 13

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

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

如何在角度设置垫子桌子的宽度？

13 个答案: