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 Position Actions
Julia Cole client1@example.com Accountant
Frank Coleman client2@example.com Sales manager
Denise Watson client3@example.com Designer
Tiffany Kim client4@example.com Senior developer
Emma Cooper client5@example.com Junior developer

Partial Table

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

Name Actions
Jeremy Fuller
Scott Ruiz
Joshua Munoz
Jack Greene
Keith Simpson

Helper Classes

Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg