Angular4 Material md-table Column Width AutoSizing Like Normal Table

Question

I'm using an md-table in an Angular 4 app since I'm using Material for other parts of the UI formatting. When I use a regular table with basically no CSS, the columns auto-format to fit the widest td element. With md-table, the columns are all set to the same width divided into the total table width, except for cells that are too wide and then it extends the cell and pushes the other cells in that 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>

The datatable css:

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

The 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've helped fix some of the issue with overflow/overlap of text by setting .mat-row { height: auto }, but what I really want is for the table to do the same auto-fit with the columns as the normal table. I've attempted messing with the flex property and resetting width on the rows and columns to initial, but haven't found the right combination of css to get back the original formatting style of the table element.

Answer 1

There's an open issue 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