Angular4 Material md-table Column Width Auto Size Like a regular table

Question

I am using an md table in an Angular 4 application, since I am using Material for other parts of the user interface formatting. When I use a regular table, mostly without CSS, the columns are automatically formatted to fit the widest td element. In the md table, all columns have the same width divided by the total width of the table, with the exception of cells that are too wide, and then it expands the cell and pushes the other cells in this row to the right. My regular 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> 

Datatable css data:

 .datatable { border: 1px solid black; border-collapse: collapse; font-size: 10px; width: 100%; overflow-y:scroll; } 

Md table:

  <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> 

I helped fix some text overflow / overlap issue by setting .mat-row { height: auto } , but I really want the table to perform the same auto-substitution with columns as a regular table. I tried to spoil the flex property and the width of the row and column flush to initial , but did not find the correct css combination to return the original formatting style of the table element.

Answer 1

There is an open problem for this right now. See 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