草庐IT

关于 html：如何以angular设置 mat-table 列的宽度？

codeneng 2023-03-28 原文

How to set width of mat-table column in angular?

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

图像-1

图像-2

user.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 <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>

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

user.component.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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 ？尽可能避免使用此指令，因为没有它可以正常工作。

如果您在样式中使用 scss，则可以使用 mixin 来帮助生成代码。如果你每次都把所有的属性都放好，你的风格很快就会失控。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    @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');
                    }
                }  
            }
        }
    }

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

1
2
3
4
5
6
7
    @include mat-table-columns((
   
        orderid: (width: 6rem, color: gray),
        date: (width: 9rem),
        items: (width: 20rem)
   
    ));

这会生成如下内容：

1
2
3
4
5
6
7
8
    .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 mixin)。当您将 mixin 与 @include 一起使用时，您将 $columns 的值放在其中(在我上面的示例 @include mat-table-columns(( 中，第二个括号是 $columns 的值的开头，它是代表每个命名列的 sass 数据结构)

正如我已经实施的那样，它运行良好。您只需要使用 matColumnDef="description"

添加列宽

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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

应用宽度

造型

1
2
3
4
5
6
.mat-column-productId {
    flex: 0 0 10%;
}
.mat-column-productName {
    flex: 0 0 50%;
}

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

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

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

1
2
3
4
.mat-column-yourFieldName {
    flex: none;
    width: 100px;
}

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

希望这对某人有所帮助。

  • 它对我有用，谢谢。如果我想避免为每个列重复 flex: none; 怎么办？假设我尝试了一个类 .mat-column-* { flex: none; } 但它不起作用。

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

1
2
3
4
5
6
7
8
9
10
11
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，设置此代码并完美运行。

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

与其尝试"在帖子中修复它"，为什么不在表格需要尝试将其放入其列之前截断描述？我是这样做的：

1
2
3
4
5
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>

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

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

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

例如：

1
2
3
4
<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>

在此处输入图像描述我有一个有四列的表格。请看截图。在 scss 文件中，我包含以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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 除了样式之外在哪里使用？

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

1
2
3
th {
  width: 100px;
}

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

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

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

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

只需将 style="width:5% !important;" 添加到 th 和 td

1
2
3
4
  <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。

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

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

何以mat-tablespanclassnbspangularangular-materialcsshtml

有关关于 html：如何以angular设置 mat-table 列的宽度？的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  5. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  6. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  8. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  9. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  10. ruby-on-rails - Prawn PDF : I need to generate nested tables - 2

    我需要一个表，其中行实际上是2行表，一个嵌套表是..我怎样才能在Prawn中做到这一点？也许我需要延期..但哪一个？ 最佳答案 现在支持子表:Prawn::Document.generate("subtable.pdf")do|pdf|subtable=pdf.make_table([["sub"],["table"]])pdf.table([[subtable,"original"]])end 关于ruby-on-rails-PrawnPDF:Ineedtogeneratenested

随机推荐