Material Design Lite Table full Width

Material Design Lite Table full Width 100% : You can add custom class to make the table fullscreen ie. full width. Here in this tutorial we are going to explain how to make material design lite tables full width using custom class css.

Material Design Lite Table full Width 100% Example

You can create custom class and add the following css to make material design tables full width 100% as in the below example-

<style>
.full-width-table{
width:100%;
}
</style>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable full-width-table mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">John Dee</td>
      <td>USA</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Kelly</td>
      <td>UK</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Janvi</td>
      <td>IN</td>
    </tr>
  </tbody>
</table>

In the above example we have created custom class and added css width:100%; to make the table full width 100%. If you run the above example it will produce the output something like this-

If want to check for different screen size run demo in fullscreen mode.

Add Comment

📖 Read More

• 1. Material design lite login page
• 2. Material design lite not Working on mobile devices
• 3. Material design lite Registration page
• 4. Material Design Lite Button Icon
• 5. Material Design Lite Side Menu With Icons