Community forum for knowledge and support

Updated 11 months ago

Responsive table issues in webflow

At a glance

The community member is new to Webflow and Relume, and they copied the table5 component into Webflow. They noticed that the columns start to cut off in tablet view, even though they haven't styled it yet. The community members discuss that tables are generally not responsive, and suggest alternatives like using a list or card view, or adding a horizontal scrollbar. They also recommend using the native Webflow Grid or Quick Stack for better control over responsiveness, especially if the community member is populating the table via the CMS. The community members provide a link to the Webflow University documentation on Quick Stack as a potential solution.

Useful resources

I'm new to webflow and relume. I copied the table5 component into webflow and at the top I can view it in desktop, tablet etc..its starts to cut off the columns starting in tablet view. I just pasted it in, haven't styled it yet. Did I do something wrong or are the tables not responsive?

M
J
6 comments

tables in general, regardless of really anything, are not responsive no. Depending on what you are trying to do you could either swap for a list, or card view, or have a horizontal scrollbar.

Thank you for responding. I'm trying to create a three column list of business names so I thought a table would be my best option.

do you happen to have any kind of visual - like a design maybe or no?

Just a simple table like this is what I need.

okay got it - yeah I would just use the native Webflow Grid or Quick Stack for this - you'll have more control over responsiveness there. Unless the row background color is important to you.

If you are populating this via the CMS - and lets say that a majority of your users are on desktop - then I would do a table like you've tried to do so far, and then on mobile you could just do a simple quick stack element that collapses/stacks on tablet down - using the same CMS collection - avoiding the duplicate data. So you'd have two different sections entirely, but the same data.

If mobile is the primary use though (most common these days for sure) then I would design for that first, even at desktop and just go with a simple list in a 3 column grid/quick stack.

Here's the Webflow University doc on quick stack.
https://university.webflow.com/lesson/quick-stack?topics=elements

Hope that helps - if you get hung up on making this happen, pop back in here and let me know - happy to help!

Thank you so much for all the info. I will look at the links you sent and hopefully figure it all out. Thanks again, I appreciate it.

Add a reply
Sign up and join the conversation on Slack