title: What is the correct way to make a Material Design Lite table 100% width?
body: <p>I'm looking into using <a href="https://github.com/google/material-design-lite">Google's Material Design Lite</a> framework and I'm wondering how I can make a table span a 100% width of it's containing element:</p>
  
  <p>Take this table:</p>
  
  <pre><code>&lt;table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="mdl-data-table__cell--non-numeric"&gt;Material&lt;/th&gt;
        &lt;th&gt;Quantity&lt;/th&gt;
        &lt;th&gt;Unit price&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;Acrylic (Transparent)&lt;/td&gt;
        &lt;td&gt;25&lt;/td&gt;
        &lt;td&gt;$2.90&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;Plywood (Birch)&lt;/td&gt;
        &lt;td&gt;50&lt;/td&gt;
        &lt;td&gt;$1.25&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;Laminate (Gold on Blue)&lt;/td&gt;
        &lt;td&gt;10&lt;/td&gt;
        &lt;td&gt;$2.35&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>How can I make this MDL table span a 100% of it's container?</p>
  
  <p>I have set up this <a href="http://jsfiddle.net/sphm1zxL/">JSFiddle</a> with the table example taken from <a href="http://www.getmdl.io/components/index.html#tables-section">docs</a>.</p>