Skip to main content

How to Make Tables Responsive

Submitted by jessica on Sun, 03/11/2018 - 15:59

iphone emojiemoji table

After I built this example directory, I realized the tables were scrolling off the page on my phone. After a bit of googling, I realized I could prioritize which columns I wanted to appear on smaller devices, and which ones I wanted to hide, under Structure > Views > Your View > Format > Settings. 

Assign high to the columns that you want to remain visible on mobile devices.
Assign high to the columns that you want to remain visible on mobile devices, and low to the ones that are less important.

Now, when viewing any view of the directory on my phone, only the first name, telephone and email will appear, although the user still has the option to view the hidden columns also.

a view of my example directory from my phone
A view of my example directory from my phone.