title: Material Design Lite grid with tables
body: <p>I am experimenting with the recently released MDL kit and trying to use the grid layout with cards and tables. </p>
  
  <p>what I found was the MDL grid is not as flexible as the Bootstrap grid for nested columns (probably 'cos I don't know enough about it yet). So in my 3 column layout I use cards and tables side-by-side to present the data I have. </p>
  
  <p>But unfortunately the card does not span the whole width of a column unless I apply width=100% manually. But as soon as I do it the table is not responsive and overlap with cards around in when the screen size reduces.</p>
  
  <p><a href="https://jsfiddle.net/x9gj73y7/4/">JSFiddle</a></p>
  
  <p>Can anyone tell me how to get rid of this issue. </p>
  
  <pre><code>&lt;body&gt;
      &lt;main class="mdl-layout__content"&gt;
      &lt;div class="page-content"&gt;
          &lt;div class="demo-grid-1 mdl-grid"&gt;
              &lt;div class="mdl-cell mdl-cell--4-col "&gt;
                  &lt;div class="mdl-card mdl-shadow--4dp demo-card-wide"&gt;
                      &lt;div class="mdl-card__media"&gt;
                          &lt;img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;"&gt;
                      &lt;/div&gt;
                      &lt;div class="mdl-card__supporting-text"&gt;Auckland Sky Tower, taken March 24th, 2014&lt;/div&gt;
                      &lt;div class="mdl-card__supporting-text"&gt;The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="mdl-cell mdl-cell--4-col"&gt;
                  &lt;table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--4-col" style=" width: 100%"&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;
              &lt;/div&gt;
              &lt;div class="mdl-cell mdl-cell--4-col"&gt;
                  &lt;div class="mdl-card mdl-shadow--2dp demo-card-wide"&gt;
                      &lt;div class="mdl-card__title"&gt;
                           &lt;h2 class="mdl-card__title-text"&gt;Welcome&lt;/h2&gt;
  
                      &lt;/div&gt;
                      &lt;div class="mdl-card__supporting-text"&gt;
                          &lt;div class="demo-grid-1 mdl-grid"&gt;
                              &lt;div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell"&gt;this is a text&lt;/div&gt;
                              &lt;div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell"&gt;another text&lt;/div&gt;
                              &lt;div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell"&gt;30/05/2015&lt;/div&gt;
                              &lt;div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell"&gt;3999.34&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>