I’m looking to create a comparison table to display prices like Ghost (desktop and mobile) https://ghost.org/pricing/. However, I’m discovering that this seems to be unnecessarily complex in Webflow.
- 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.
- I decided that I would recreate the table using Flexbox (see https://airtable.com/pricing 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!
- 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.
Has anybody any tips or solutions on how to achieve a responsive comparison table?
Thanks in advance