10

我有一个包含许多列的简单表，我希望在调整浏览器窗口大小时自动缩小列。与table-responsiveBootstrap 一起工作，但我正在为 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 和 grids。

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

4

3 回答 3

27

我创建了一个小指令，可以应用于mat-table表格以使其响应。这样很容易只为应用程序中的某些表添加响应行为（在我的情况下这是一个要求）。

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

特征

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

堆栈闪电战

这不应被视为通用解决方案，因为它当然不会涵盖所有用例。表格移动视图的样式也与我的特定要求有关，可能需要调整。但我只是想分享它，以便它可以作为其他人的起点服务和帮助。

TS 严格模式

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

Stackblitz 使用 TS 严格模式

于 2020-02-25T12:58:30.663 回答
4

目前没有办法在 MDL 中实现这一点，在 github 上查看这个问题。

我的桌子也有同样的问题，但我想我必须让它们对我自己做出反应。那里有很多教程，您应该做一些研究，哪种表格设计最适合您的响应式网站。

另外，我认为值得查看 materializecss 的响应表

于 2015-10-04T21:07:54.157 回答
0

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

width: 100%;
overflow-x: auto;
于 2021-02-08T20:00:01.623 回答