What is the correct way to make a Material Design Lite table 100% width?

Question

I'm looking into using Google's Material Design Lite framework and I'm wondering how I can make a table span a 100% width of it's containing element:

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>$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>

How can I make this MDL table span a 100% of it's container?

I have set up this JSFiddle with the table example taken from docs.

Answer 1

Just add a new fullwidth class to table and th which sets the width to 100% directly.

.fullwidth {
    width: 100%;
}

Try this fiddle