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>

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

我猜新的Material世界不喜欢表格，所以最好的选择是将布局更改为不使用表格。

Answer 1

我创建了一个小指令，可以将其应用于mat-table表以使其具有响应性。这样，仅将响应行为添加到应用程序中的某些表就很容易了（这是我的要求）。因此，基本上，该伪指令将每个标头单元格（列名称）的内容复制为数据属性，以便可以通过CSS content属性（受此article启发）对其进行访问。不幸的是，CSS样式无法应用于指令，因此需要将样式全局导入。

功能：

对于移动视图，没有多余的硬编码列名
响应语言更改并更新移动视图的列名
对行更改/更新也有反应（例如添加一行）
在移动视图中，它仅显示通过matSort指令可排序的列

这是一个小小的堆叠演示：

https://stackblitz.com/edit/material-table-responsive

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

Answer 2

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

我的桌子遇到了同样的问题，但我想我必须让他们自己回应。那里有很多教程和＆amp;你应该做一些研究，哪种桌面设计最适合你的响应网站。

另外，我认为值得查看materializecss＆＃39; responsive tables

Answer 3

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

width: 100%;
overflow-x: auto;

如何使Angular Material表响应

3 个答案: