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

Answer 2

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

Otherwise, making a helper class ".mdl-full-width" wouldn't be bad.

<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

// Optional class to display at full width. .mdl-textfield--full-width { width: 100%;}

Answer 3

Check out this edit I did to your fiddle https://jsfiddle.net/sphm1zxL/2/

Just add a "new" css class to all the elements with:

.new{
    width: 100%
}