Come rendere le tabelle MDL reattive?

Question

Per MDL tables, esiste un attributo per rendere la tabella reattiva?

Answer 1

Un'opzione è utilizzare il bootstrap oltre a MDL (Material Design Lite). Usando bootstrap, una tabella può essere resa reattiva usando: <div class="table-responsive"> </div> La tabella MDL può essere aggiunta all'interno degli elementi div.

Answer 2

ho dato il tavolo MDL una classe di:

table { 
    width: 100%; 
    height: auto; 
} 

Answer 3

Ti piace questa:

.mdl-data-table { 
 
    table-layout:fixed; 
 
    width:100%; 
 
} 
 
#my-table td, th { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    -o-text-overflow: ellipsis; 
 
} 
 

 
/* unrelated to responsive table css */ 
 
#my-table{ 
 
    margin-top:24px; 
 
} 
 
.material-icons { 
 
    vertical-align: -25%; 
 
}

<meta name="description" content="Responsive Material Design Lite Table" /> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.green-light_green.min.css" /> 
 
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 

 
<section class="mdl-grid" id="my-table"> 
 
    <div class="mdl-layout-spacer"></div> 
 
    <div class="mdl-cell mdl-cell--6-col-tablet mdl-cell--10-col-desktop mdl-cell--stretch"> 
 

 
    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> 
 
     <thead> 
 
     <tr> 
 
      <th>Key</th> 
 
      <th>Description</th> 
 
      <th>Run</th> 
 
      <th><i class="material-icons">timer</i></th> 
 
      <th>Work</th> 
 
      <th><i class="material-icons">timer</i></th> 
 
      <th>Play</th> 
 
      <th><i class="material-icons">timer</i></th> 
 
      <th>Study</th> 
 
      <th><i class="material-icons">timer</i></th> 
 
      <th>Assumptions</th> 
 
      <th>Climb Mountain</th> 
 
      <th>Fly Kite</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>ABC-1234</td> 
 
      <td>asdf asdf asdf asdf</td> 
 
      <td>asdf asdf asdf asdf</td> 
 
      <td>25</td> 
 
      <td>qwer qwer qwer</td> 
 
      <td>25</td> 
 
      <td>sdfgs sdf sdgf</td> 
 
      <td>25</td> 
 
      <td>lkjhlk lkhjh</td> 
 
      <td>25</td> 
 
      <td>bvnfhf hffjj hdgdh</td> 
 
      <td>25</td> 
 
      <td>bjh jbh kjb bkjb</td> 
 
     </tr> 
 
     <tr> 
 
      <td>XYZ-1234</td> 
 
      <td>dfdf asdf asdf asdf</td> 
 
      <td>bgbgdf asdf asdf asdf</td> 
 
      <td>25</td> 
 
      <td>qwer qwer qwer</td> 
 
      <td>25</td> 
 
      <td>sdfgs sdf sdgf</td> 
 
      <td>25</td> 
 
      <td>lkjhlk lkhjh</td> 
 
      <td>25</td> 
 
      <td>bvnfhf hffjj hdgdh</td> 
 
      <td>25</td> 
 
      <td>bjh jbh kjb bkjb</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div class="mdl-layout-spacer"></div> 
 
</section>   

Answer 4

Per fare un tavolo lite disegno materiale reattivo, è possibile utilizzare lo stesso principio della classe .table-responsive di bootstrap. La tabella scorrerà orizzontalmente su piccoli dispositivi (sotto 768px). Quando visualizzi qualcosa di più largo di 768 px, non c'è differenza.

Se non si desidera includere l'intera libreria di bootstrap, sono i seguenti CSS nel progetto:

.table-responsive { 
    min-height: .01%; 
    overflow-x: auto; 
} 
@media screen and (max-width: 767px) { 
    .table-responsive { 
     width: 100%; 
     margin-bottom: 15px; 
     overflow-y: hidden; 
     -ms-overflow-style: -ms-autohiding-scrollbar; 
     border: 1px solid #ddd; 
    } 
    .table-responsive > .table { 
     margin-bottom: 0; 
    } 
    .table-responsive > .table > thead > tr > th, 
    .table-responsive > .table > tbody > tr > th, 
    .table-responsive > .table > tfoot > tr > th, 
    .table-responsive > .table > thead > tr > td, 
    .table-responsive > .table > tbody > tr > td, 
    .table-responsive > .table > tfoot > tr > td { 
     white-space: nowrap; 
    } 
    .table-responsive > .table-bordered { 
     border: 0; 
    } 
    .table-responsive > .table-bordered > thead > tr > th:first-child, 
    .table-responsive > .table-bordered > tbody > tr > th:first-child, 
    .table-responsive > .table-bordered > tfoot > tr > th:first-child, 
    .table-responsive > .table-bordered > thead > tr > td:first-child, 
    .table-responsive > .table-bordered > tbody > tr > td:first-child, 
    .table-responsive > .table-bordered > tfoot > tr > td:first-child { 
     border-left: 0; 
    } 
    .table-responsive > .table-bordered > thead > tr > th:last-child, 
    .table-responsive > .table-bordered > tbody > tr > th:last-child, 
    .table-responsive > .table-bordered > tfoot > tr > th:last-child, 
    .table-responsive > .table-bordered > thead > tr > td:last-child, 
    .table-responsive > .table-bordered > tbody > tr > td:last-child, 
    .table-responsive > .table-bordered > tfoot > tr > td:last-child { 
     border-right: 0; 
    } 
    .table-responsive > .table-bordered > tbody > tr:last-child > th, 
    .table-responsive > .table-bordered > tfoot > tr:last-child > th, 
    .table-responsive > .table-bordered > tbody > tr:last-child > td, 
    .table-responsive > .table-bordered > tfoot > tr:last-child > td { 
     border-bottom: 0; 
    } 
} 

E poi, basta avvolgere la tabella dati materiale all'interno di un tag div con la classe .table-responsive:

<div class="table-responsive"> 
<table class="mdl-data-table mdl-data-table--selectable mdl-shadow--2dp" style="margin: 0 auto;"> 
    <thead> 
     <tr> 
      <th class="mdl-data-table__cell--non-numeric">Property</th> 
      <th>Type</th> 
      <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="mdl-data-table__cell--non-numeric">single</td> 
      <td>Function</td> 
      <td>Start the single file picker.</td> 
     </tr> 
     <tr> 
      <td class="mdl-data-table__cell--non-numeric">multi</td> 
      <td>Function</td> 
      <td>Start the multi file picker.</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

Questo dovrebbe creare la tabella seguente in un piccolo dispositivo:

Answer 5

ho avuto questo problema in modo, posso capire questo modo

<div class="table-responsive mdl-shadow--4dp"> 
    <table class="mdl-data-table mdl-js-data-table"> 
    <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">Dore</td> 
     <td>12</td> 
     <td>$2.90</td> 
    </tr> 
    <tr> 
     <td class="mdl-data-table__cell--non-numeric">Window</td> 
     <td>2</td> 
     <td>$1.50</td> 
    </tr> 
    </tbody> 
</table>