我有一个简单的表格,其中有许多列,当调整浏览器窗口大小时,我希望列能自动缩小。 table-responsive
适用于 Bootstrap,但我正在寻找类似于 Angular Material 的东西。我想避免使用 2 个表格定义,并且不想在 CSS 中自己去做这件事。在 Angular Material 中是否有标准方法来实现这一点?
<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>
请注意,由于目前 Angular Material 没有表格组件,因此我在这里使用了 Material Design Lite 表格。包括使用 flex 和 grid 的问题都是相同的。
我猜新的 Material 设计不太喜欢使用表格,所以最好的选项是更改布局,不再使用表格。