Каков правильный способ сделать таблицу Material Design Lite шириной 100%?

Я изучаю структуру Google Material Design Lite, и мне интересно, как я могу сделать таблицу шириной 100%, содержащей элемент:

Возьмите эту таблицу:

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

Как я могу сделать эту таблицу MDL на 100% контейнера?

Я установил этот JSFiddle пример таблицы, взятый из docs.

Ответ 1

Просто добавьте новый класс fullwidth в table и th, который устанавливает ширину на 100% напрямую.

Попробуйте fiddle

Ответ 2

Отметьте это редактирование, которое я сделал с вашей скрипкой https://jsfiddle.net/sphm1zxL/2/

Просто добавьте "новый" класс css ко всем элементам:

.new{
    width: 100%
}

Ответ 3

Я не уверен, что это правильный путь, но после поиска, хотя их scss файлы, единственный класс, который я нашел (который, я думаю, в порядке, если ваша кнопка в форме) .mdl-textfield- -full ширина

В противном случае создание вспомогательного класса ".mdl-full-width" не будет плохим.

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

Исходный файл Здесь в строке 46

//Необязательный класс для отображения на полной ширине..mdl-textfield - full-width {width: 100%;}

Ответ 4

Смотрите полное демо http://www.tutorialspark.com/Google_MaterialDesignLite_Tutorials/MDL_Material_Design_Lite_Tables.php

 table{width:100%;}

<html>
  <head>
    <title>Google MDL Tables : Selectable Data Table  </title>
    <!-- Material Design Lite -->
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
   <link rel="stylesheet" 
    href="#" onclick="location.href='https://storage.googleapis.com/code.getmdl.io/1.0.4/material.red-purple.min.css'; return false;" /> 
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons'; return false;">
  </head>
 
  <body>
  <div class="main-demo">
       <!-- Class "mdl-data-table-selectable" -->
   <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">Component</th>
      <th>Quantity</th>
      <th>Unit Cost</th>
    </tr>
  </thead>
  <tbody>
    <!-- Row 1 -->
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Keyboard(backlit)</td>
      <td>10</td>
      <td>$50</td>
    </tr>
    
    <!-- Row 2 -->
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Mouse(wireless)</td>
      <td>22</td>
      <td>$25</td>
    </tr>
    
    <!-- Row 3 -->
    <tr>
      <td class="mdl-data-table__cell--non-numeric">LED Display(1080p)</td>
      <td>56</td>
      <td>$113</td>
    </tr>
    
  </tbody>
</table>
    
  </div>
</body>
</html>