Qual è il modo corretto per rendere una tabella Material Design Lite 100% larghezza?

Sto esaminando con Google's Material Design Lite quadro e mi chiedo come posso fare un tavolo abbracciano una larghezza 100% di esso è elemento contenente:Qual è il modo corretto per rendere una tabella Material Design Lite 100% larghezza?

Prendete questa tabella:

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

Come posso fare questa tabella MDL copre il 100% del suo contenitore?

Ho impostato questo JSFiddle con l'esempio di tabella preso da docs.

fonte

2015-07-07 Luke

Se ho compreso correttamente la tua domanda, intendi avere larghezza della tabella come larghezza completa? –

@ Sidsec9 Ci scusiamo per qualsiasi confusione. Quello che chiedi è corretto. Cioè perché la tabella si estenda al 100% della larghezza del suo contenitore (qualunque cosa sia). – Luke

Basta aggiungere un nuovo fullwidth classe per table e th che imposta direttamente la larghezza al 100%.

Prova questa fiddle

fonte

2015-07-07 06:59:03

È il "e" th' "che mi ha colpito. – Luke

felice di aiutare :) –

Questo è corretto, impostando su 100% direttamente. Se stai usando la griglia, puoi usare le classi appropriate lì per dargli la larghezza che ti serve. – Garbee

Partenza questa modifica che ho fatto a vostro violino https://jsfiddle.net/sphm1zxL/2/

Basta aggiungere una "nuova" classe CSS a tutti gli elementi con:

.new{ 
    width: 100% 
}

fonte

2015-07-07 06:13:18

vedere il pieno demo 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>

fonte

2015-11-29 21:36:19

io non sono sicuro se questo è il modo corretto, ma dopo una ricerca se i loro file SCSS, il solo la classe che ho trovato (che credo sia ok se il tuo pulsante è in una forma) è .mdl-textfield - ful l-width

Altrimenti, fare una classe di supporto ".mdl-full-width" non sarebbe male.

<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

// classe opzionale per visualizzare a pieno la larghezza. .mdl-textfield - full-width {width: 100%;}

fonte

2015-12-24 23:38:28

Qual è il modo corretto per rendere una tabella Material Design Lite 100% larghezza?

risposta

Problemi correlati