如何使Angular Material表格具有响应式设计

Question

我有一个简单的表格，其中有许多列，当调整浏览器窗口大小时，我希望列能自动缩小。 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 设计不太喜欢使用表格，所以最好的选项是更改布局，不再使用表格。

- Steven Scott

---

对于 Angular 2+ 的解决方案感兴趣的人可以在 https://github.com/angular/material2/issues/8494 上点赞，因为当更多的人表示关注时，团队就会有更多的理由优先考虑此功能。 - Marcus

Answer 1

我创建了一个小型指令，可以应用于mat-table表格，使其具有响应性。这样，只需在应用程序中添加一些表格的响应行为就变得容易了（这是我的要求）。

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

• 移动视图中没有额外硬编码的列名
• 对语言更改做出反应，并更新移动视图的列名
• 还对行更改/更新（例如添加行）做出反应
• 在移动视图中，仅显示通过matSort指令进行排序的列

这不应被视为通用解决方案，因为它当然不能涵盖所有用例。表格移动视图的样式也与我的具体要求相关联，可能需要进行调整。但我只是想分享它，以便它可能可以作为其他人的起点来服务和帮助。 Angular 12+（TS严格模式） 由于用户klaydze在评论中的要求，这里提供了另一种版本，支持在Angular 12+中使用tsconfig.json的strict: true要求。 Stackblitz using TS strict mode Angular < 12 Stackblitz

- knoefel

---

做得非常好！谢谢。 - H. Herzl

哇，太棒了！感谢您提供如此精彩的解决方案，您刚刚拯救了世界。我是真心实意的。 - Santosh

是的，他真的救了我们。非常感谢，@knoefel 也许可以将该指令部署为 Angular 包，这样任何人都可以在不创建指令的情况下使用它。 - Obumuneme Nwabude

我在使用Angular 12中的指令时遇到了问题。它抱怨与此相关：Type 'HTMLCollection' must have a '[Symbol.iterator]()' method that returns an iterator.。 - klaydze

@knoefel 哇！这个修复了所有问题！谢谢，这是一个非常好的指令！ - klaydze

Answer 2

目前在MDL中无法实现此功能，请查看此GitHub上的问题。

我也遇到了同样的问题，但我想我必须自己使它们具有响应性。有很多教程可供参考，您应该调查一下哪种表格设计最适合您的响应式网站。

此外，我认为值得检查materializecss的响应式表格

- realappie

---

不幸的是，我得出了同样的结论，并转而使用Angular Grid。我还进行了一些重新设计，以不需要相同的表格方式。Materialize CSS是一个不错的想法，可以让某些东西工作。 - Steven Scott

我喜欢Materialize作为Material规范的事实上CSS框架，但不幸的是，他们从未改变过网格和布局，而是使用浮动来代替弹性盒子。更不用说该项目已经死了；多年来没有提交记录，我相信。 - OzzyTheGiant

Answer 3

一个简单的解决方案是将您的表格用以下样式的<div>包装:

width: 100%;
overflow-x: auto;

- kozenka

---

这并不是一个深奥的解决方案，但相对于其他复杂的解决方案而言，这对我来说是一种优雅且可行的解决方案。谢谢。 - fonzane