如何解决为什么“width: auto”属性对 Angular mat-table 元素没有影响?
我使用的是 Angular 9。我有一个简单的三列 mat-table ...
<mat-table *ngIf="!isMobile" #table [dataSource]="dataSource">
<ng-container matColumnDef="time">
<mat-header-cell *matHeaderCellDef> Time </mat-header-cell>
<mat-cell *matCellDef="let article_stat">{{ getTime(article_stat) }} m</mat-cell>
</ng-container>
<ng-container matColumnDef="score">
<mat-header-cell *matHeaderCellDef> score </mat-header-cell>
<mat-cell *matCellDef="let article_stat">
{{ getscore(article_stat) }} ({{ getWeightedscore(article_stat) }})
</mat-cell>
</ng-container>
<ng-container matColumnDef="article">
<mat-header-cell *matHeaderCellDef> Article </mat-header-cell>
<mat-cell *matCellDef="let article_stat">
<a href='{{ article_stat.article.path }}'>{{ article_stat.article.title }}</a>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="getRowClass(row)"></mat-row>
</mat-table>
下面是我的组件的简单 CSS。应用组件级别没有 CSS ...
.mat-table {
width: auto;
}
.rising {
font-weight: bold;
}
然而,当我的表格被渲染时,它占据了屏幕的 100%,尽管每列中的数据并没有占据那么多空间。如果我将宽度更改为固定像素宽度(例如“200px”),浏览器会尊重 wdith。为什么“宽度:自动”不起作用,我如何设置我的 mat-table 样式,使其只占用与其中的数据一样多的空间?
解决方法
我查看了 Angular 中关于“mat-table”的文档。
在给定的示例中,他们使用的 table 元素在开始 table 标记中包含“mat-table”:
HTML
<table mat-table [dataSource]="dataSource">
CSS:
table {
width: auto;
}
我已经测试了 width: auto;
的 css,它按预期工作 - 这是直接从 Angular documentation 中提取的,并在 stackbliz 中进行了测试。您可以查看我的工作测试 here。
编辑:
更清楚地说,在上面列出的文档页面底部有使用 Tables with display: flex
(<mat-table>
而不是 <table mat-table>
)的注释。
请注意,这种方法意味着您不能包含某些本机表 具有 colspan/rowspan 等功能或具有可自行调整大小的列 基于他们的内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。