Jak sprawić, by tabele MDL były responsywne?

Question

Dla MDL tables, czy istnieje atrybut powodujący, że tabela reaguje?

Answer 1

Jedną z opcji jest użycie bootstrap oprócz MDL (Material Design Lite). Korzystając z funkcji ładowania początkowego, tabelę można uaktywnić za pomocą: <div class="table-responsive"> </div> Tabela MDL może zostać dodana w elementach div.

Answer 2

dałem tabelę MDL klasa:

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

Answer 3

Jak to:

.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

Aby materiał konstrukcja lite stół reaguje, można korzystać z tego samego Zasada bootstrap klasy .table-responsive. Tabela będzie wówczas przewijać się poziomo na małych urządzeniach (poniżej 768 pikseli). Oglądając obrazy o szerokości przekraczającej 768 pikseli, nie ma różnicy.

Jeśli nie chcesz dołączyć całą bibliotekę bootstrap, obejmują następujące CSS w swoim projekcie:

.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; 
    } 
} 

a następnie, po prostu owinąć materiał tabelę konfiguracji wewnątrz znacznika div z klasą .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> 

To powinno utworzyć następującą tabelę w niewielkim urządzeniu:

Answer 5

miałem ten problem tak, mogę zrozumieć to w ten sposób

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