使 Material Design Lite table 100% 宽度的正确方法是什么?
What is the correct way to make a Material Design Lite table 100% width?
我正在研究使用 Google's Material Design Lite 框架,我想知道如何使 table 跨度为包含元素的 100% 宽度:
拿这个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>
我怎样才能让这个 MDL table 跨越 100% 的容器?
查看我对您的 fiddle https://jsfiddle.net/sphm1zxL/2/
所做的编辑
只需将 "new" css class 添加到具有以下内容的所有元素:
.new{
width: 100%
}
只需在 table
和 th
中添加一个新的 fullwidth
class 即可直接将宽度设置为 100%。
.fullwidth {
width: 100%;
}
试试这个 fiddle
我不确定这是否是正确的方法,但在搜索他们的 scss 文件后,我发现的唯一 class(如果您的按钮在表单中,我认为没问题)是 .mdl-textfield--全角
要不然做个帮手class“.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%;}
我正在研究使用 Google's Material Design Lite 框架,我想知道如何使 table 跨度为包含元素的 100% 宽度:
拿这个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>
我怎样才能让这个 MDL table 跨越 100% 的容器?
查看我对您的 fiddle https://jsfiddle.net/sphm1zxL/2/
所做的编辑只需将 "new" css class 添加到具有以下内容的所有元素:
.new{
width: 100%
}
只需在 table
和 th
中添加一个新的 fullwidth
class 即可直接将宽度设置为 100%。
.fullwidth {
width: 100%;
}
试试这个 fiddle
我不确定这是否是正确的方法,但在搜索他们的 scss 文件后,我发现的唯一 class(如果您的按钮在表单中,我认为没问题)是 .mdl-textfield--全角
要不然做个帮手class“.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%;}