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.

If I understand your question correctly, do you mean to have table width as full width? — Siddharth Thevaril, Jul 07 '15 at 04:29
@Sidsec9 Sorry for any confusion. What you ask is correct. I.e. for the table to span 100% width of it's container (whatever that might be). — Luke, Jul 07 '15 at 05:30

score 19 · Accepted Answer · edited May 23 '18 at 14:58

19

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

.fullwidth {
    width: 100%;
}

Try this fiddle

edited May 23 '18 at 14:58

Nick N.

12,902
7
57
75

answered Jul 07 '15 at 06:59

Siddharth Thevaril

3,722
3
35
71

2

It's the "and `th`" that got me. – Luke Jul 07 '15 at 07:30
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. – Garbee Jul 07 '15 at 11:03
This works! Thanks. But what is my table isn't selectable? Which column should I decide to have full-width on? – Abhi Feb 25 '16 at 16:49
4

This answer was quite confusing without looking at the fiddle. Why not just say "add width: 100%" ? – clocksmith Sep 18 '16 at 04:29

score 2 · Answer 2 · answered Dec 24 '15 at 23:38

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

score 1 · Answer 3 · answered Jul 07 '15 at 06:13

1

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

answered Jul 07 '15 at 06:13

Vikas Dhochak

33
8

What is the correct way to make a Material Design Lite table 100% width?

3 Answers3