Wie man ein Eckiges Material Tabelle reaktionsschnell Weg

Habe ich eine einfache Tabelle mit zahlreichen Spalten, und ich möchte, dass die Spalten automatisch verkleinert wird, wenn die Größe des browser-Fensters. Die table-responsive arbeitet mit Bootstrap, aber ich bin auf der Suche nach etwas ähnliches für Winkel-Material. Ich versuche zu vermeiden, dass 2 Tabellen-Definitionen, und nicht wirklich wollen, dies zu tun, mich in CSS. Gibt es einen standard-Weg, im Winkel Material für diese?

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" flex>
    <thead>
        <th class="mdl-data-table__cell--non-numeric">Date</th>
        <th class="mdl-data-table__cell--non-numeric">Time</th>
        <th class="mdl-data-table__cell--non-numeric">Park</th>
        <th class="mdl-data-table__cell--non-numeric">Home Team</th>
        <th class="mdl-data-table__cell--non-numeric">Away Team</th>
        <th class="mdl-data-table__cell--non-numeric">Win/Loss</th>
    </thead>
    <tbody>
        <tr ng-repeat="game in games">
            <td class="mdl-data-table__cell--non-numeric">{{game.GameDate | SLS_Date}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.GameTime | SLS_Time:'HH:mm' }}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.VenueName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.HomeTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.AwayTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.WinLoss}}</td>
        </tr>
    </tbody>
</table>

Hinweis, ich habe das Material-Design Lite-Tabelle hier, wie Eckig Material nicht über einen Tisch heute. Gleiche problem, einschließlich der Verwendung von flex-und Stromnetze.

Ich denke, die neue Materielle Welt nicht, wie Tische, so dass die beste option ist, um das layout ändern, um nicht mit Tabellen.