<div class="demo-preview-block debug-off"> <h5>With 'divs'</h5> <div class="mdl-data-tableex mdl-js-data-tableex mdl-data-tableex--selectable mdl-shadow--2dp"> <div class="mdl-div-data-tableex__row mdl-div-data-tableex__head"> <div class="mdl-data-tableex__cell--non-numeric mdl-data-tableex__cell--grow">Material</div> <div class="mdl-data-tableex__cell--numeric">Quantity</div> <div class="mdl-data-tableex__cell--numeric">Unit price</div> </div> <div class="mdl-div-data-tableex__row"> <div class="mdl-data-tableex__cell--grow">Acrylic (Transparent)</div> <div class="mdl-data-tableex__cell--numeric">25</div> <div class="mdl-data-tableex__cell--numeric">$2.90</div> </div> <div class="mdl-div-data-tableex__row"> <div class="mdl-data-tableex__cell--non-numeric mdl-data-tableex__cell--grow">Plywood (Birch)</div> <div class="mdl-data-tableex__cell--numeric">50</div> <div class="mdl-data-tableex__cell--numeric">$1.25</div> </div> <div class="mdl-div-data-tableex__row"> <div class="mdl-data-tableex__cell--non-numeric mdl-data-tableex__cell--grow">Laminate (Gold on Blue)</div> <div class="mdl-data-tableex__cell--numeric">10</div> <div class="mdl-data-tableex__cell--numeric">$2.35</div> </div> </div> <h5>With 'table-element'</h5> <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> </div>