material-design-lite - 如何使 MDL 表响应？

Question

对于MDL 表，是否有使表响应的属性？

Answer 1

要使 Material Design lite 表格具有响应性，您可以使用与.table-responsivebootstrap 类相同的原理。然后表格将在小型设备（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 2

像这样：

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

除了 MDL（Material Design Lite）之外，一种选择是使用引导程序。使用引导程序，可以使用以下方法使表格具有响应性：<div class="table-responsive"> </div>可以在 div 元素中添加 MDL 表格。

Answer 4

我遇到了这个问题，我可以这样解决

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

Answer 5

我给了 mdl 表一个类：

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