web-dev-qa-db-fra.com

Quelle est la bonne façon de créer une table de Material Design Lite de 100% de largeur?

Je cherche à utiliser Framework de Google Material Design Lite et je me demande comment je peux faire en sorte qu'un tableau ait une largeur de 100% de son élément contenant:

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

Comment puis-je faire en sorte que cette table MDL couvre 100% de son conteneur?

J'ai mis en place ce JSFiddle avec l'exemple de tableau tiré de docs .

htmlcssmaterial-design-lite
15
Luke

Ajoutez simplement une nouvelle classe fullwidth à table et th qui définit directement la largeur à 100%.

.fullwidth {
    width: 100%;
}

Essayez ceci violon

18
Siddharth Thevaril

Je ne suis pas sûr que ce soit le bon moyen, mais après avoir bien cherché leurs fichiers scss, la seule classe que j'ai trouvée (ce qui est correct si votre bouton est dans un formulaire) est .mdl-textfield - full-width

Sinon, créer une classe d'assistance ".mdl-full-width" ne serait pas mauvais.

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

Fichier source ici à la ligne 46

// Classe optionnelle à afficher en pleine largeur. .mdl-textfield - pleine largeur {width: 100%;}

2
Michael Guild

Découvrez cette modification que j'ai faite à votre violon https://jsfiddle.net/sphm1zxL/2/

Ajoutez simplement une "nouvelle" classe css à tous les éléments avec:

.new{
    width: 100%
}
1
Vikas Dhochak

Voir la démonstration complète 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="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.red-purple.min.css" /> 
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </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>

0
ethan hunt