Streaming live at 10am (PST)

Creating a comparison table


#1

Hi Guys,

I'm trying to find a structure solution in webflow that would allow me to create a comparison chart like the one on this page: http://www.thecrowder.com/index.php/categories/reviews/design/main

Can you suggest an approach?

Thanks


#2

Something like this:

Don't forget to set the main row NOT TO morph for devices. Except maybe the one containing logo+band, that can stack up to save space on devices.

I put a div inside all columns, so that you NEVER give a class and style the column, because it leads to complications. So instead give any padding and styles to the div inside.


#3

Oh and you can use black star and star for your stars, instead of grabbing an icon or something else... it's right in every font (:

Black star	★	U+2605	★	
Star	☆	U+2606	☆

#4

Vincent - thanks a lot for the detailed reply! it makes much more sense now...
When it comes to mobile, I was thinking that it would be best to display only the first column (brand logo and name) and the last 2 columns: 'Rating' and the 'visit website'. Everything else should be as an expand - collapse mode.. how would you go about doing that?

I really do appreciate all your help.


#5

If you want to ditch entire columns for selected devices, then give a class name to every one of the coulmns you want to make disappear. this means every cell. Then once selected, set to not appear for devices (in the settings tab).

I just tried if it was possible to affect columns visibility, and yes it seems to work.


#6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.