Responsive Tables

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
Jack Greene customer1@example.com Business
Jose Parker customer2@example.com Disabled
David Fuller customer3@example.com Trial
Scott Young customer4@example.com Disabled
Jose Mills customer5@example.com Business

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
Brian Stevens client1@example.com Business
David Fuller client2@example.com Business
Brian Cruz client3@example.com Trial
Jeffrey Shaw client4@example.com Disabled
Jose Parker client5@example.com Business