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

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