html - 使 Material Design Lite 表格 100% 宽度的正确方法是什么？

Question

我正在研究使用Google 的 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

只需添加一个新fullwidth类，table并将th宽度直接设置为 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>

源文件在第 46 行

// 全角显示的可选类。.mdl-textfield--full-width { 宽度：100%;}

Answer 3

看看我对你的小提琴所做的这个编辑https://jsfiddle.net/sphm1zxL/2/

只需向所有元素添加一个“新”css 类：

.new{
    width: 100%
}