角质材料.隐藏属性的使用

Question

我有一个问题，使用隐藏属性提供的角质材料在一个表，我试图隐藏列在特定的断点。

我有一个非常简单的表示例，其中头单元格和行单元格使用隐藏属性，如下所示：

<md-card layout="row">
      <table class="main-table" layout-fill flex layout="column">
        <thead flex>
          <tr layout="row">
            <th flex hide-sm>Status</th>
            <th flex hide-md>Value</th>
            <th flex hide-md>Type</th>
            <th flex hide-sm>Action</th>
            <th flex hide-md>Card Number</th>
            <th flex>Customer</th>
            <th flex>Contact</th>
          </tr>
        </thead>
      <tbody flex>
        <tr layout="row" ng-repeat="message in vm.messageListFailures" class="pointer">
          <td flex hide-sm>
            <span class="status-label message-status-failed">Never Sent</span>
          </td>
          <td flex hide-md>
            £3500
          </td>
          <td flex hide-md>
            Bla
          </td>
          <td flex hide-sm>
            Added
          </td>
          <td flex hide-md>
            12345678910
          </td>
          <td flex>
            Mr John Smith
          </td>
          <td flex>
            j.smith@somewhere.com
          </td>
        </tr>
      </tbody>
    </table>
  </md-card>

工作码页

当我调整代码依赖示例中预览窗格的大小时，这些列不会隐藏在中小断点上。我还注意到表实际上没有填充卡片的可用宽度，我在表元素中添加了布局填充和flex，但这并没有什么区别。

我在这里错过了什么？

谢谢

Answer 1

参考以下block.it作品，

 <tr layout="row">
        <th  flex class="ng-hide">Status</th>
        <th  flex  class="ng-hide">Value</th>
        <th  flex class="ng-hide">Type</th>
        <th  flex  class="ng-hide">Action</th>
        <th  flex class="ng-hide">Card Number</th>
        <th  flex>Customer</th>
        <th flex>Contact</th>
  </tr>