Pricing table on webflow

Design help General
1

Hello :smile:

I’m looking at adding a pricing table to my site just wondering has anyone got some examples I could take a look at how they achieved this?

Thanks in advance,

Matt

2

Something like this

1189×367 14 KB

3

Hi @Matty, probably the easiest thing to do, is to create a table using divs. You can create a container and then add some divs to use as rows, using display inline block and float left css styling.

For example, if you wanted to create a 5 column table , you could add 5 divs for the first row, give each a width of 20% and set the display to inline block and float to left.

You can repeat the process for each row. On the last div of each row, you add an extra class and give the last div in each row a float style set to off.

I hope that helps give you some ideas, other may also be able to help with their suggestions :slight_smile:

1 Like
4

@cyberdave

Thanks for the reply Dave, hmm I’m not quite sure I understand what you mean. Sounds a little complicated.

5

Hi @Matty, thanks for the comment.

Take a look at our example div table in the demo kit site:

site: https://preview.webflow.com/preview/demokit?preview=28e8f61ae432f6c36f101e57078c18b6
​
​The folder name is Layout
and the page name is Div Table.

There you can see how to create a div table. Does this help?

1 Like
6

Hey @cyberdave, why set the last div of each row float: off?

7

removed…

9

Thanks for the help @cyberdave

In the end I just added the table via HTML.

http://hairb.webflow.io/hair

10

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