Responsive Tables

Mobile friendly tables that work across all screen sizes.

Full Table

The first way to make a table responsive, is to wrap it with <div class="table-responsive"></div>. This way the table will be horizontally scrollable and all data will be accessible on smaller screens (< 768px).

Name Email Access Actions
Ralph Murray customer1@example.com Disabled
Scott Young customer2@example.com Personal
Jack Estrada customer3@example.com Disabled
Adam McCoy customer4@example.com VIP
Justin Hunt customer5@example.com VIP

Partial Table

The second way is to use responsive utility CSS classes for hiding columns in various screen resolutions. This way you can hide less important columns and keep the most valuable on smaller screens. At the following example the Access column isn't visible on small and extra small screens and Email column isn't visible on extra small screens.

Name Email Access Actions
Wayne Garcia client1@example.com Disabled
Ralph Murray client2@example.com Personal
Jack Estrada client3@example.com Business
Ryan Flores client4@example.com Personal
Jeffrey Shaw client5@example.com VIP