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

【问题标题】：What is the correct way to make a Material Design Lite table 100% width?使 Material Design Lite 表格 100% 宽度的正确方法是什么？
【发布时间】：2015-07-07 04:06:18
【问题描述】：

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

【问题讨论】：

如果我正确理解您的问题，您的意思是让表格宽度为全宽吗？
@Sidsec9 如有任何混淆，我们深表歉意。你问的是正确的。 IE。让表格跨越其容器的 100% 宽度（无论可能是什么）。

标签： html css material-design-lite

【解决方案1】：

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

.fullwidth {
    width: 100%;
}

试试这个fiddle

【讨论】：

吸引我的是“和th”。
这是正确的，直接设置为100%。如果你使用网格，你可以使用适当的类来给它任何你需要的宽度。
这行得通！谢谢。但是什么是我的表不可选择？我应该决定在哪一列设置全角？
这个答案很混乱，没有看小提琴。为什么不直接说“添加宽度：100%”？

【解决方案2】：

我不确定这是否是正确的方法，但是在搜索了他们的 scss 文件后，我发现的唯一类（如果您的按钮在表单中，我认为可以）是 .mdl-textfield- -全宽

否则，创建一个辅助类“.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-textfield--full-width { 宽度：100%;}

【讨论】：

【解决方案3】：

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

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

.new{
    width: 100%
}

【讨论】：