How to make MDL tables responsive?

Question

For MDL tables, is there an attribute to make the table responsive?

Answer 1

To make a material design lite table responsive, you can use the same principle of the .table-responsive class of bootstrap.The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference.

If you don't want to include the entire bootstrap library, include the following CSS in your project:

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

And then, just wrap the material design table inside a div tag with the .table-responsive class:

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

That should create the following table in a small device:

Answer 2

Like this:

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