如何在卡片中实现MDL表并让表格滚动？

Question

我想在这里复制用户界面：http://www.google.com/design/spec/components/data-tables.html#data-tables-tables-within-cards

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--12-col">
    <div class="mdl-card mdl-shadow--4dp" style="width:100%">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Header</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
          <thead>
            <tr>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

1. 如何让卡片容器的宽度环绕桌子？
2. 当屏幕较小且桌子太长时，如何让桌子在卡片内滚动？或者甚至让卡片在页面中滚动？

我也不确定如何使这个配置起作用：

------------------
|    8    |   4   |
------------------

在8和4网格内的卡片内。但是我想如果我可以让它延伸到12格，它将适用于8/4。