Comparison table - how to?

mader

Well-known member

Babiato Lover

Trusted Seller

Trusted Uploader

Sep 18, 2019

519

372

63

• Sep 28, 2020

• #1

Hi guys, I got very stuck here... I want to make a comparison table similar to the one on this website: https://pressidium.com/plans/
Does anyone have any idea what plugin they are using to achieve it?

 

• 

Reactions: ckeeper

mader

Well-known member

Babiato Lover

Trusted Seller

Trusted Uploader

Sep 18, 2019

519

372

63

• Sep 28, 2020

• #2

Just to make it clear that I need this table show the way they do.. To have the comparison elements stick on the front, and only the "comparable" items to scroll... Been googling from 2 days to find such thing for WordPress.

 

ELLIO7

Well-known member

Trusted Uploader

Banned User

Nov 27, 2019

2,202

2,775

113

125

Mars

• Sep 28, 2020

• #3

You can use elfsight pricing table widget. It has same layout you are looking for. check it here:

Pricing Table by Elfsight

Embed responsive pricing table into your website.

elfsight.com

 

• 

Reactions: mader

phpCore

ReLOADED

Trusted Uploader

Banned User

Jun 6, 2020

1,511

1,651

120

127.0.0.1/::1

• Sep 28, 2020

• #4

mader said:

Hi guys, I got very stuck here... I want to make a comparison table similar to the one on this website: https://pressidium.com/plans/
Does anyone have any idea what plugin they are using to achieve it?

Click to expand...

Modern - Bootstrap 4 Pricing Tables

Modern – Bootstrap 4 Pricing Tables is a modern responsive pricing table build with Bootstrap 4 framework. It’s built 9 styles and 6 colors included with bootstrap grid. Simple to implement, Just ...

codecanyon.net

 

• 

Reactions: mader

ELLIO7

Well-known member

Trusted Uploader

Banned User

Nov 27, 2019

2,202

2,775

113

125

Mars

• Sep 28, 2020

• #5

phpcore said:

Modern - Bootstrap 4 Pricing Tables

Modern – Bootstrap 4 Pricing Tables is a modern responsive pricing table build with Bootstrap 4 framework. It’s built 9 styles and 6 colors included with bootstrap grid. Simple to implement, Just ...

codecanyon.net

Click to expand...

Actually this doesn't include the layout he is looking for.

 

• 

Reactions: mader

phpCore

ReLOADED

Trusted Uploader

Banned User

Jun 6, 2020

1,511

1,651

120

127.0.0.1/::1

• Sep 28, 2020

• #6

ELLIO7 said:

Actually this doesn't include the layout he is looking for.

Click to expand...

Perhaps this ?

Preview:

https://codepen.io/bick/pen/pyZKRQ

Click to expand...

Free source code:

https://www.w3tweaks.com/demo/css_price_cards/responsive-bootstrap-pricing-table.zip

Click to expand...

 

• 

Reactions: mader and ELLIO7

tradesman

Well-known member

Mar 9, 2020

367

225

63

Cold North

• Sep 28, 2020

• #7

You may want to implement this HTML code

Table fixed header and scrollable body

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or mess up the style. Here...

stackoverflow.com

And use this better frontend CSS

Pricing comparison table/matrix

...

codepen.io

 

• 

Reactions: mader

frizzel

Well-known member

Trusted Uploader

Jun 13, 2019

485

253

63

Wherever my imagination takes me

• Sep 28, 2020

• #8

You need to search for "pricing table swipe". Then you'll come across examples that have the functionality you want. It will include some scripting and coding though, I didn't find a ready to use plug-in for WordPress. Which is a bit strange, maybe I should create one.

Anyway on to two examples.

This one: Responsive Sliding Period/Pricing Table. The description how to use the javascript is here: tabella.js

There's also another, older, script called tablesaw (Scroll down to the ReadMe section and click on the the demo link for "Swipe Mode").

 

• 

Reactions: mader

smalok

Active member

Aug 21, 2020

195

125

43

• Sep 28, 2020

• #9

Looks a lot like this - don't know about the swipe feature on Desktop though.

How to Create a Responsive Table with Horizontal Scroll in Divi

Creating a responsive table can be a challenge, especially if you have a table with a lot of columns. A great way to solve this problem is to add horizontal scroll capability to the table. A table with horizontal scroll solves two main problems. First, it allows the designer to keep the spacing...

www.elegantthemes.com

 

Last edited: Sep 28, 2020

• 

Reactions: mader

frizzel

Well-known member

Trusted Uploader

Jun 13, 2019

485

253

63

Wherever my imagination takes me

• Sep 28, 2020

• #10

I said I couldn't find a plug-in for WordPress that has the functionality you want. Well, there is and it's free: TablePress. You need the extension Responsive Tables (also free but the developer would like a donation) available from the official website.

There's a locked first column and scrollable other columns in what they call 'flip mode'. You can see an example on the link above, scroll down to "Responsive table with the flip mode".

You'll have to do the styling of the tables yourself as TablePress is only about displaying data in tables in many different ways, but with very basic styling only.

 

• 

Reactions: mader

mader

Well-known member

Babiato Lover

Trusted Seller

Trusted Uploader

Sep 18, 2019

519

372

63

• Sep 29, 2020

• #11

Thanks to all for the suggestions! I will go trough all and will report back how I made it once I do it.
Love you all!

 

• 

Reactions: phpCore and smalok

frizzel

Well-known member

Trusted Uploader

Jun 13, 2019

485

253

63

Wherever my imagination takes me

• Sep 29, 2020

• #12

And a little more search revealed a plug-in available here on Babiato: Tablenator which among others has examples based on that tablesaw script I mentioned before.

 

• 
• 

Reactions: smalok and mader