Angular4 Material md-table 列宽 AutoSizing Like Normal Table
Posted
技术标签:
【中文标题】Angular4 Material md-table 列宽 AutoSizing Like Normal Table【英文标题】:Angular4 Material md-table Column Width AutoSizing Like Normal Table 【发布时间】:2018-01-12 17:56:45 【问题描述】:我在 Angular 4 应用程序中使用 md 表,因为我将 Material 用于 UI 格式的其他部分。当我使用基本没有 CSS 的常规表格时,列会自动格式化以适应最宽的 td 元素。使用 md-table,所有列都设置为相同的宽度,除以表格的总宽度,除了单元格太宽,然后它扩展单元格并将该行中的其他单元格推到右侧。我的常规表:
<md-tab label="Data" >
<md-card class="datacard">
<md-card-content>
<div>
<table class="datatable">
....
</table>
</div>
</md-card-content>
</md-card>
</md-tab>
数据表css:
.datatable
border: 1px solid black;
border-collapse: collapse;
font-size: 10px;
width: 100%;
overflow-y:scroll;
md 表:
<md-tab label="Data" >
<md-card class="datacard">
<md-card-content>
<div>
<div class="datatableheader">
<md-input-container floatPlaceholder="never" id="filtercontainer">
<input mdInput #filter placeholder="Filter services" />
</md-input-container>
</div>
<md-table id="datatable" #datatable [dataSource]="resultDataSource" mdSort>
<ng-container cdkColumnDef="Index">
<md-header-cell *cdkHeaderCellDef md-sort-header>Index</md-header-cell>
<md-cell *cdkCellDef="let result">result,Index</md-cell>
</ng-container>
<ng-container cdkColumnDef="Service">
<md-header-cell *cdkHeaderCellDef md-sort-header>Service</md-header-cell>
<md-cell *cdkCellDef="let result">result.Service</md-cell>
</ng-container>
<ng-container cdkColumnDef="Region">
<md-header-cell *cdkHeaderCellDef md-sort-header>Region</md-header-cell>
<md-cell *cdkCellDef="let result">result.Region</md-cell>
</ng-container>
</md-table>
<md-paginator #paginator
[length]="results.length"
[pageIndex]="0"
[pageSize]="25"
[pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>
</div>
</md-card-content>
</md-card>
</md-tab>
我通过设置.mat-row height: auto
帮助解决了文本溢出/重叠的一些问题,但我真正想要的是让表格与普通表格一样自动适应列。我试图弄乱flex
属性并将行和列的宽度重置为initial
,但没有找到正确的css组合来恢复表格元素的原始格式样式。
【问题讨论】:
【参考方案1】:目前有一个未解决的问题。见this workaround。
.mat-table
display: table;
width: 100%;
> .mat-header-row, > .mat-row
display: table-row;
padding: 0;
border: none;
> .mat-header-cell, > .mat-cell
display: table-cell;
height: 48px;
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
https://plnkr.co/edit/fDX4dgL26Ri0EEmQhSsR?p=preview
【讨论】:
以上是关于Angular4 Material md-table 列宽 AutoSizing Like Normal Table的主要内容,如果未能解决你的问题,请参考以下文章
每一行和标题列的“编辑/删除”按钮是 md-table 组件中的“操作”
如何阻止用户移动到下一步,直到使用 Angular Material Stepper(Angular 4)完成当前步骤
使用 Material 图标字体并将 Angular 组件的封装设置为原生
如何发送在 Angular Material Autocomplete 中选择的属性的父对象?
我可以在 Angular / Angular Material 中以编程方式移动 mat-horizontal-stepper 的步骤吗