2
私はマテリアルをUI書式の他の部分に使用しているので、Angular 4アプリケーションでmdテーブルを使用しています。基本的にCSSがない通常の表を使用すると、列は最も広いtd要素に合わせて自動フォーマットされます。 md-tableでは、幅が広すぎるセルを除いて、列全体がテーブル幅の合計に分割された同じ幅に設定され、セルを拡張してその行の他のセルを右にプッシュします。私の定期的なテーブル：Angular4マテリアルmdテーブルの列幅オートサイジングノーマルテーブルのように
<md-tab label="Data" >
<md-card class="datacard">
<md-card-content>
<div>
<table class="datatable">
....
</table>
</div>
</md-card-content>
</md-card>
</md-tab>
DataTableの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の正しい組み合わせが見つかりませんでした。