I have a simple table with numerous columns, and I would like the columns to shrink automatically when sizing the browser window. The table-responsive
works with Bootstrap, but I am looking for something similar for Angular Material. I am trying to avoid having 2 table definitions, and do not really want to do this myself in CSS. Is there a standard way in Angular Material for this?
<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>
Note, I have used the Material Design Lite table here, as Angular Material does not have a table today. Same problem, including the use of flex and grids.
I guess the new Material world does not like tables, so best option is to change the layout to not use tables.