Responsiveness in mdl-data-table

[itisparas]

Data Table overflows out of the viewport on small screens.

[Garbee]

The data table isn't responsive as there are no MD specs for how to handle tables on small screens. Inherently, tables are not responsive. You'd need to handle making them responsive manually or have a different design (like a card-based design) for mobile instead of a table.

[ricardo-destemido]

Hi. I'm using this style to fix this style, and involved the table with a "div" like this:

<div class="table-responsive"><table...

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

Font: stackoverflow

[iamabs2001]

You can write your data table inside a div with css (overflow : scroll) or if you want so called responsiveness then apply css (width:100%) to table.