Html 制作100%宽度的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>

材料
量
单价
丙烯酸（透明）
25
$2.90
胶合板（桦木）
50
$1.25
层压（蓝色上的金色）
10
$2.35

如何使此MDL表跨越其容器的100%

---

我已经用从中提取的表格示例设置了此选项。

请查看我对您的小提琴所做的编辑

只需在所有元素中添加一个“新”css类即可：

.new{
    width: 100%
}

---

只需将一个新的

fullwidth

类添加到

table

和

th

，它直接将宽度设置为100%

.fullwidth {
    width: 100%;
}

---

试试这个

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

否则，创建一个helper类“.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>

//以全宽显示的可选类。mdl textfield--全宽{width:100%；}

---

如果我没弄错你的问题，你的意思是把桌子的宽度设为全宽吗？@Sidsec9很抱歉给你添了点麻烦。你问的是对的。也就是说，表格要跨越其容器的100%宽度（不管是什么）。这是“and

th

”的意思。这是正确的，直接设置为100%。如果你正在使用网格，你可以在那里使用适当的类来提供你所需要的任何宽度！谢谢但是什么是我的桌子是不可选择的？我应该在哪一列上画全幅？这个答案不看小提琴就很混乱。为什么不直接说“添加宽度：100%”？