Was ist der richtige Weg, um einen Material Design Lite-Tisch 100% breit zu machen?

Ich suche in Google's Material Design Lite Framework und ich frage mich, wie ich eine Tabelle überspannen eine Breite von 100% der es enthaltenden Elements machen kann:Was ist der richtige Weg, um einen Material Design Lite-Tisch 100% breit zu machen?

Nehmen Sie diese Tabelle:

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

Wie kann ich diese MDL-Tabelle überspannt 100% ihres Containers?

Ich habe diese JSFiddle mit der Tabelle Beispiel aus docs eingerichtet.

Quelle

2015-07-07 Luke

Wenn ich Ihre Frage richtig verstehe, meinen Sie, die Tischbreite als volle Breite zu haben? –

@ Sidsec9 Sorry für jede Verwirrung. Was Sie fragen, ist richtig. I.e. damit die Tabelle 100% der Breite ihres Containers überspannt (was auch immer das sein mag). – Luke

Fügen Sie einfach eine neue fullwidth Klasse table und th die setzt die Breite direkt auf 100%.

Versuchen Sie, diese fiddle

Quelle

2015-07-07 06:59:03

Es ist das "und' th ", das mich erwischt hat. – Luke

froh zu helfen :) –

Das ist richtig, Einstellung auf 100% direkt. Wenn Sie das Gitter verwenden, können Sie die entsprechenden Klassen dort verwenden, um es in der von Ihnen benötigten Breite zu platzieren. – Garbee

Schauen Sie sich diese bearbeiten ich auf Ihre Geige tat https://jsfiddle.net/sphm1zxL/2/

Fügen Sie einfach eine „neue“ CSS-Klasse auf alle Elemente mit:

.new{ 
    width: 100% 
}

Quelle

2015-07-07 06:13:18

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

Quelle

2015-11-29 21:36:19

Ich bin nicht sicher, ob dies der richtige Weg ist, aber nach, obwohl ihre SCSS Dateien suchen die nur Klasse, die ich gefunden habe (was ich denke, ist in Ordnung, wenn Ihr Knopf in einem Formular ist) ist .mdl-textfield - ful l-width

Andernfalls wäre eine Hilfsklasse ".mdl-full-width" nicht schlecht.

<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 Klasse bei voller Breite angezeigt werden soll. .mdl-textfield - full-width {width: 100%;}

Quelle

2015-12-24 23:38:28

Was ist der richtige Weg, um einen Material Design Lite-Tisch 100% breit zu machen?

Antwort

Verwandte Themen