Strategies for creating a comparison table

Design help General
1

Hi everyone,

I’m looking to create a comparison table to display prices like Ghost (desktop and mobile) :point_right:https://ghost.org/pricing/. However, I’m discovering that this seems to be unnecessarily complex in Webflow.

  1. I discovered that there is no such thing as a Table component. If I want to add a , I have to add it using the Embed component. I don’t really want to do this as I want to allow other collaborators to easily update the table. Also, the table has a lot of information. I think that the 10,000 character limit of the Embed component would be quickly surpassed.
  2. I decided that I would recreate the table using Flexbox (see Airtable Pricing | Compare Plans, Features & Costs as an example). The big drawback with this is that it doesn’t adapt well to smaller devices. This means I would have to create two tables — 1 for desktop, 1 for mobile. This doesn’t work in my case as I have collaborators that would need to update a pricing table in two places. Too risky!
  3. I also tried creating the table with CSS Grid. As was the case with Flexbox there was problems for the mobile breakpoint. It seems very difficult to manage the cells of the grid and column stacking seems very tricky to achieve. I’m not fully up-to-speed with the possibilities of CSS Grid so I’m open to suggestions.

    4. Has anybody any tips or solutions on how to achieve a responsive comparison table?

    Thanks in advance

2

Hey, creating such a table can be hard for beginners in webflow. But it is definitely possible with grids.
Even for mobile breakpoints, grid is the best way to work with.
There is really great clonable project as well: https://webflow.com/website/Webflow-Pricing-Table-Clone
I think it´s exactly what you need.
Cheers, Nils

1 Like
3

Thanks a lot. This is exactly the layout I was after :grinning:

4

Do keep in mind that css grid does not translate to IE11 or lower. If IE is in your target browser list, you might wanna check out flexbox with fixed percentages/min-max px for this.

I personally use css grid a lot. If IE is a target, I either redirect to a compatibility page or I use flex

2 Likes
5

Perfect! Please don´t forget to mark this Question as solved. :slight_smile: