Streaming live at 10am (PST)

How to create a compare table?

Hey there,

I’m looking to create a compare table where product/service can be compared to alternatives. I’m new to Webflow and unsure how I can create this.

I found this is a old feature request, but considering I’ve seen a lot of awesome things on Webflow I’m hoping a table is doable.

Here’s an example of what I’m looking for:

Thank you!

hi @am93 what about this?
TABLES

1 Like

@Stan this looks great. Thank you!

1 Like

Hey @Stan a few questions about these templates:

  1. My goal is for mobile devices to list the columns individually so you can compare from top down (ie each column turns into a row so in my above screenshot the header shows “name, 0-3 weeks, ✓, $, Very Low, —” from top down.) The template requires a drag from left to right on mobile (screenshot attached).

  2. Is there a way I can color the column in a similar way to the screenshot I provided as well?

  3. I would also like to remove the drag top and down bar even on desktop. It doesn’t seem like adding padding to the table wrapper is doing anything.

It seems part of the problem with the template is that the grids are not combined so I’m having trouble figuring out how to use auto-fit and adjusting sizing of the row.

Thank you!

Screen Shot 2020-11-18 at 12.06.26 PM|320x427

Hi @am93 I have looked shortly on these tables before posting but didn’t look deep inside. So I have post them as you weren’t be able to find some examples. They look a bit too complicated to create basic table . If I will one day need to use a table I will look for any JS library that may be a “simpler” way. But Like I said I didn’t look into this issue in detail, yet.

EDIT

Why not just simply use standard HTML table. I have just add one (as test ) into CMS collection so you can add dynamic data from CMS. I don’t how complex it can be but it will be more easy way.

Hey @Stan I’m not a strong developer (only took a few hours of html/css course online).

While I can create a regular looking table using html, it will be difficult to still accomplish what I need with my code knowledge. My coding knowledge would lead to something too simple unfortunately.

It seems the templates help me get 90% there if I can just make it mobile compatible in the way I mentioned and remove the need to scroll. Here’s what I have: https://compare-example.webflow.io/

Hi @am93 I’d send you PM ,but in meantime, If you do not know how to build HTML Table you can look on internet and find HTML Table Generator there is many of them, so you can find one that will be more intuitive to you. Here is one EXAMPLE or here ANOTHER

Hey @am93
I might have a solution to this, or maybe I can bring you a step forward.

I replicated a table with CSS Grids and even made it responsive, so you can scroll horizontally on mobile/tablet if there is not enough space on your screen.
The downside it has is that it is not super duper easy to change column-width and row-height.

Here are two screenshots of two different types I created.
If you want to clone it, just DM me.

HI @Schuschi_Eyeswhy why you just not post here link to share project with solution to be available for everyone who is or will looking for it?

Hey stan

You’re right.
Here’s the link:

The table of the second screenshot is on the second page in the project

1 Like

Hey @Schuschi_Eyes , thanks for sharing. Maybe I’m missing something but it looks like you created a separate design on mobile rather than making the desktop version dynamic to address my first concern? For the second concern the color would be on the second to left column if possible, as the very left would be labels of category. I do still see the drag bar related to my third concern.

Hi @am93
Hmm, where did you see that? I just checked my project and I can’t see a separated mobile version… Can you show me a screenshot of what you mean?

You can create a background for the second column. just add divs into the grid, set z-index: -1 and give it a color. You might have to work with margin to place the div correctly inside the grid. I added this now to the project so you see what I mean.

You can see the scrollbar because the grid needs more space than its container. Just make some grid columns smaller so that the scrollbar only shows on responsive.

Hey @Schuschi_Eyes , I labeled these 1,2,3 according to my needed changes:

  1. They are on two separate pages as you pointed out, so it’s not the same table adjusting to screen size am I correct? The labels for the tables are also completely different from one another so I’m having a tough time understanding how this solves my problem with stacking on mobile, unless you’re suggesting to re-create a separate table on mobile view.

What I’d need along the desktop screenshot in my original question turns into this on mobile:
Screen Shot 2020-11-20 at 11.08.45 AM

  1. The color is least important so we can skip this.

  2. Lowering the width or height any further would hurt the design. As you can see it’s causing me to drag up and down: https://streamable.com/iz8oil

Hey @am93

Sorry for my late response. I didn’t see the notification.

  1. The two pages are two completely separate tables. Just see them as two different approaches to solve your problem. I just shared both of them so you can decide what would be a better fit for your needs.
    The mobile versions are included in each of them. just shrink the screen width and you see that they are responsive.
    Maybe this is a dumb question… but how do you want to achieve a mobile version where you can easily compare the different companies without scrolling vertically or horizontally?
    In my first table you can scroll horizontally on mobile so you can compare the different companies easily.

  2. All right

  3. Hmm maybe I get you wrong here but couldn’t you just add some height to it so you dont have to scroll inside the container?

Hi @Schuschi_Eyes,

  1. The purpose of my follow up question after Stan shared the table was to remove the drag. The screenshot I shared shows how I want them to work and how they would be compared. The table you shared don’t seem to be a solution.

  2. I haven’t been able to eliminate the need to scroll on mobile by adding height or width.

Would appreciate anyones help if they know how to remove the need to drag horizontally and vertically and to make the design dynamic as I have shown in my screenshots. Thanks!

Ah okay, I see.

So do you want to hide some information on mobile?
Or how do you want to show all the different features on mobile? If you list the companies vertically and dont want to scroll in any direction, you would have to list the different features of each company vertically aswell. (or am I wrong?)
I think this would make it hard for the user to compare the different features because they are all in the same column.

But anyway. If you want to have the companies listed horizontally and on mobile vertically, you could do this with a nested grid.

Create a grid with the following settings.
Desktop:
1 row and X columns (1 column for each company)

Mobile:
X Rows (1 row for each company) and 1 column

Now every grid-item of this grid contains one company.
With this grid the companies are all listed horizontally on desktop and vertical for mobile.

Then add a grid to each grid-item of the first grid you just created. So every “company” now contains its own grid.

Set up the grid like this:
Desktop:
1 column and X rows (1 row for each feature and one for the company name)

Mobile:
Set it up as you like. You’re pretty much free on how to layout the different features.

Does this help?