我在 Angular 4 应用程序中使用 md-table,因为我将 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组合来恢复表格元素的原始格式样式。
目前有一个悬而未决的问题。看这个解决方法 https://github.com/angular/material2/issues/6058#issuecomment-318612278.
.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 https://plnkr.co/edit/fDX4dgL26Ri0EEmQhSsR?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)