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.

Solution 1

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

.fullwidth {
    width: 100%;
}

Try this fiddle

Solution 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%;}

Solution 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%
}

Comments

[Luke]

It's the "and th" that got me.

[Garbee]

This is correct, setting to 100% directly. If you are using the grid, you can use the appropriate classes there to give it whatever width you need.

[Abhi]

This works! Thanks. But what is my table isn't selectable? Which column should I decide to have full-width on?

[clocksmith]

This answer was quite confusing without looking at the fiddle. Why not just say "add width: 100%" ?