Html 使 Material Design Lite 表格 100% 宽度的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31259563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the correct way to make a Material Design Lite table 100% width?
提问by Luke
I'm looking into using Google's Material Design Liteframework and I'm wondering how I can make a table span a 100% width of it's containing element:
我正在考虑使用Google 的 Material Design Lite框架，我想知道如何使表格跨其包含元素的 100% 宽度：
Take this table:
拿这张表：
<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>.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>.35</td>
</tr>
</tbody>
</table>
How can I make this MDL table span a 100% of it's container?
我怎样才能让这个 MDL 表跨越 100% 的容器？
I have set up this JSFiddlewith the table example taken from docs.
回答by Siddharth Thevaril
回答by Michael Guild
I am not sure if this is the correct way but after searching though their scss files, the only class that I found ( which I think is ok if your button is in a form ) is .mdl-textfield--full-width
我不确定这是否是正确的方法，但在搜索了他们的 scss 文件后，我发现的唯一类（如果您的按钮是表单，我认为这没问题）是.mdl-textfield--full-width
Otherwise, making a helper class ".mdl-full-width" wouldn't be bad.
否则，制作帮助类“.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>
// Optional class to display at full width. .mdl-textfield--full-width { width: 100%;}
// 可选类以全宽显示。.mdl-textfield--full-width { 宽度：100%;}
回答by Vikas Dhochak
Check out this edit I did to your fiddle https://jsfiddle.net/sphm1zxL/2/
看看我对你的小提琴做的这个编辑https://jsfiddle.net/sphm1zxL/2/
Just add a "new" css class to all the elements with:
只需向所有元素添加一个“新”css类：
.new{
width: 100%
}
