制作材料设计简化版100%宽度的正确方法是什么？

Question

我正在研究使用Google's Material Design Lite框架，我想知道如何才能使一个表格跨越它所包含元素的100%宽度：

以下面的表格为例：

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

怎样才能使这个MDL表100%地跨越它的容器呢？

我已经用取自docs的表示例设置了这个JSFiddle。

Answer 1

只需向table和th添加一个新的fullwidth类，直接将宽度设置为100%。

.fullwidth {
    width: 100%;
}

尝试此

Answer 2

我不确定这是否是正确的方式，但在搜索他们的scss文件后，我找到的唯一类(我认为如果您的按钮在表单中就可以了)是.mdl-textfield--full-width。

否则，创建一个助手类".mdl-full-width“也不错。

<input type="submit" value="Sign In" class="mdl-textfield--full-width mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"></input>

Source File Here on line 46

//以全角显示的可选类。.mdl-文本字段--全宽{ width: 100%;}

Answer 3

查看我对您的小提琴https://jsfiddle.net/sphm1zxL/2/所做的编辑

只需使用以下命令向所有元素添加一个“新”css类：

.new{
    width: 100%
}