Как сделать таблицы MDL отзывчивыми?

Чтобы сделать таблицу Material Design Lite отзывчивой, вы можете использовать тот же принцип, что и класс .table-responsive начальной загрузки. Затем таблица будет прокручиваться горизонтально на небольших устройствах (менее 768 пикселей). При просмотре на экране шириной более 768 пикселей разницы нет.

Если вы не хотите включать всю библиотеку начальной загрузки, включите в свой проект следующий 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;
    }
}

А затем просто оберните таблицу дизайна материалов внутри тега div с классом .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>

Это должно создать следующую таблицу на небольшом устройстве:

Как это:

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

Один из вариантов — использовать начальную загрузку в дополнение к MDL (Material Design Lite). Используя начальную загрузку, таблицу можно сделать отзывчивой, используя: <div class="table-responsive"> </div> Таблицу MDL можно добавить в элементы div.

У меня была эта проблема, поэтому я могу понять это таким образом

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

Я дал таблице mdl класс:

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