如何使MDL表响应？

Question

对于MDL tables，是否有一个使表格响应的属性？

Answer 1

一种选择是除了MDL（Material Design Lite）之外还使用引导程序。使用引导程序，可以使用以下代码对表进行响应：<div class="table-responsive"> </div>可以在div元素中添加MDL表。

Answer 2

我给MDL表类：

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

Answer 3

像这样：

.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

为了使材质设计精简版表响应，您可以使用相同的.table-responsive类的bootstrap原理。然后，表将在小设备上水平滚动（768px以下）。当查看大于768px宽的任何东西时，没有区别。

如果您不希望包括整个引导库，在项目中包含以下CSS：

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

然后，只是包装与.table-responsive类div标签内的物料设计表：

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

这应该在一个小的设备创建下表：

Answer 5

我有这个问题，所以，我可以这样

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