web-dev-qa-db-ja.com

Angular4マテリアルのmd-table列幅の自動サイズ変更

Angular 4アプリでmd-tableを使用しています。これは、UIフォーマットの他の部分にMaterialを使用しているためです。基本的に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の正しい組み合わせが見つかりませんでした素子。

cssangularhtml-tableangular-material2
7
mhaken

現在、これには未解決の問題があります。 この回避策 を参照してください。

.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

9
Will Howell