title: How to make an Angular Material table responsive
body: <p>I have a simple table with numerous columns, and I would like the columns to shrink automatically when sizing the browser window.  The <code>table-responsive</code> works with Bootstrap, but I am looking for something similar for Angular Material.  I am trying to avoid having 2 table definitions, and do not really want to do this myself in CSS.  Is there a standard way in Angular Material for this?</p>
  
  <pre><code>&lt;table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" flex&gt;
      &lt;thead&gt;
          &lt;th class="mdl-data-table__cell--non-numeric"&gt;Date&lt;/th&gt;
          &lt;th class="mdl-data-table__cell--non-numeric"&gt;Time&lt;/th&gt;
          &lt;th class="mdl-data-table__cell--non-numeric"&gt;Park&lt;/th&gt;
          &lt;th class="mdl-data-table__cell--non-numeric"&gt;Home Team&lt;/th&gt;
          &lt;th class="mdl-data-table__cell--non-numeric"&gt;Away Team&lt;/th&gt;
          &lt;th class="mdl-data-table__cell--non-numeric"&gt;Win/Loss&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="game in games"&gt;
              &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{game.GameDate | SLS_Date}}&lt;/td&gt;
              &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{game.GameTime | SLS_Time:'HH:mm' }}&lt;/td&gt;
              &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{game.VenueName}}&lt;/td&gt;
              &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{game.HomeTeamName}}&lt;/td&gt;
              &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{game.AwayTeamName}}&lt;/td&gt;
              &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{game.WinLoss}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Note, I have used the Material Design Lite table here, as Angular Material does not have a table today.  Same problem, including the use of flex and grids.  </p>
  
  <p>I guess the new Material world does not like tables, so best option is to change the layout to not use tables.</p>