如何以角度设置垫表列的宽度？答案

【问题标题】：How to set width of mat-table column in angular?如何以角度设置垫表列的宽度？
【发布时间】：2019-03-31 22:14:07
【问题描述】：

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

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

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

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

【讨论】：

您应该添加将这些类添加到哪个选择器
@Nick：您不会添加到数据表的任何选择器中。只需将您的 css 选择器命名为与您在 .html 文件中为 matColumnDef 指定的名称相同
@BashirM.Saad 谢谢这让事情变得更容易，特别是选择器是预定义的，不需要添加自定义选择器。它的工作原理完全如图所示。
为什么是 !important ？尽可能避免使用此指令，因为没有它可以正常工作。

【解决方案2】：

如果您在样式中使用 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 或类似的东西作为新参数。

【讨论】：

是时候有人为此点赞我了 :-) 我发现这种方式非常有帮助 - 您可以根据需要随意扩展它，以便在组件之间更加一致。
注意：如果您愿意，当然可以使用像素。当涉及文本数据时，我通常更喜欢 ems，并且我在这里使用 rems，因为当标题和单元格字体大小不同时，它们会倾斜，因为根据定义，“em”会因字体大小而异。
这看起来超级漂亮，但我不清楚将mixin放在哪里......
如何在 mat-table 中导入$columns ??
@SridharNatuva 你不导入 $columns，这只是定义的 mixin 中的一个变量名（查找 sass mixins）。当您将 mixin 与 @include 一起使用时，您将 $columns 的值放在其中（在我上面的示例中 @include mat-table-columns(( 第二个括号是 $columns 值的开头，它是代表每个命名列的 sass 数据结构）跨度>

【解决方案3】：

正如我已经实施的那样，它运行良好。你只需要使用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%;
}

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

【讨论】：

我认为这是最好的答案。这真的帮助了我。寻找解决方案一段时间。谢谢！
它可以工作，只要确保你命名你的 css 类适当，例如 .mat-column-xxx 其中 xxx 可以是任何东西

【解决方案4】：

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

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

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

希望这对某人有所帮助。

【讨论】：

它对我有用，谢谢。如果我想避免为每个列重复 flex: none; 怎么办？假设我尝试了一个课程.mat-column-* { flex: none; }，但它不起作用。
@OJVM 尝试使用此语法来定位 scss 中的所有列。 td, th { &[class*=" mat-column-"] { flex: none; } }

【解决方案5】：

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

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

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

这是带有示例数据的StackBlitz Example

【讨论】：

这是关于 mat-table 而不是 table[mat-table]。这不适用于mat-table (flex)。 material.angular.io/components/table/overview
不确定他们说这不适用于 mat-table，我有一个 mat-table，设置此代码并完美运行。

【解决方案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>

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

【讨论】：

对我来说最好的解决方案，因为我也想截断数据。在其他解决方案中，如果您只提供列的宽度，则行高会随着数据增长超出宽度而扩大

【解决方案7】：

我们可以直接给th添加属性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>

【讨论】：

到目前为止，不推荐在 TH 标签上使用宽度。
只是为了添加到文件中，官方文档确认：<th>

【解决方案8】：

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

【讨论】：

这是答案吗？
这对我有用。您可以查看附件图片
这应该被标记为答案——不知道为什么它没有得到支持。
@AlanObject 因为你不应该在样式中使用 !important，这是一种不好的做法
@DilyanDimitrov !important 除了样式之外在哪里使用？

【解决方案9】：

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

th {
  width: 100px;
}

【讨论】：

这是目前为止最容易申请的，非常感谢！

【解决方案10】：

只需将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>

【讨论】：

不需要!important。

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

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

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

【讨论】：