如何使 Angular Material table 响应式

Question

我有一个包含许多列的简单 table，我希望在调整浏览器大小时 window 列能够自动缩小。 table-responsive 与 Bootstrap 一起使用，但我正在寻找与 Angular Material 类似的东西。我试图避免有 2 个 table 定义，并且不想自己在 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>

请注意，我在这里使用了 Material Design Lite table，因为 Angular Material 今天没有 table。同样的问题，包括使用 flex 和 grids。

我想新的 Material 世界不喜欢 tables，所以最好的选择是更改布局以不使用 tables。

Answer 1

目前无法在 MDL 中实现这一点，请查看 github 上的 this 问题。

我的 tables 也有同样的问题，但我想我必须让他们自己响应。那里有很多教程，您应该做一些研究 table 设计最适合您的响应式网站。

此外，我认为值得一试 materializecss 的 responsive tables

Answer 2

我创建了一个小指令，可以应用于 mat-table table 以使其响应。这样，很容易仅向应用程序中的某些 table 添加响应行为（这在我的案例中是必需的）。

所以基本上指令将每个 header 单元格（列名）的内容复制为数据属性，因此可以通过 CSS content 属性访问它（受此 article 启发）。不幸的是 CSS 样式无法应用于指令，因此需要全局导入样式。

特征

移动视图没有额外的硬编码列名称
对语言更改做出反应并更新移动视图的列名称
也在第 changes/updates 行做出反应（例如添加一行）
在移动视图中，它仅显示通过 matSort 指令

这不应被视为通用解决方案，因为它当然不会涵盖所有用例。此外，table 移动视图的样式受我的特定要求约束，可能需要进行调整。但我只是想分享它，以便它可以作为其他人的起点。

Angular 12+（TS 严格模式）

由于用户 klaydze 评论中的要求，这里有一个替代版本支持在 tsconfig.json 中使用 strict: true 的要求Angular 12+.

Stackblitz using TS strict mode

Angular < 12

Stackblitz

Answer 3

一个简单的解决方案是用具有以下样式的 <div> 包装您的 table：

width: 100%;
overflow-x: auto;

如何使 Angular Material table 响应式

How to make an Angular Material table responsive

angularjs

angular-material

material-design-lite