Angular4 Material md-table列寬自動調整正常表

我在Angular 4應用程序中使用了一個md表，因爲我正在使用Material for UI格式的其他部分。當我使用基本上沒有CSS的常規表格時，這些列自動格式化以適應最寬的td元素。在md-table中，除了單元格寬度過大之外，所有列都被設置爲相同的寬度，除此之外，它會擴展單元格，並將該行中的其他單元格向右推。我的常規表：Angular4 Material 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組合來獲取表格元素的原始格式樣式。

來源

2017-08-04 hakenmt

現在有一個公開的問題。見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

來源

2017-08-04 18:46:02

Angular4 Material md-table列寬自動調整正常表

回答

相關問題