Add responsive comparison table to wordpress
Meet our new plugin Table Maker. You can use it for creating simple, beautiful responsive tables for anything – specification comparisons, list of top offers, etc.
You can control and fill everything that you want to each cell. You can add content row by row and column by column. This means that plugin is good for creating top lists and for comparison table charts with specification.
Plugin has many unique features. For example, you can place subheaders in tables. You can mark first row as column for specification labels. You can make each table responsive or scrolable on mobiles.
Some Unique Features:
- Responsive option (stacks)
- Predefined icons
- Rows or cols lines
- Option to mark first column for specification labels
- Option to add labels and featured row and cols
- Works with shortcodes
- Option to add subheaders
- Option to choose color of header
- Great and simple design
- Option to upload and use images
- Optional center aligning
Here, you can find some examples
List style with responsive stack view on mobiles:
[wpsm_comparison_table id=”2″ class=””]
Row style with scroll on mobiles
[wpsm_comparison_table id=”1″ class=”hover-col1 center-table-align”]
How plugin works
Tips and tricks
After several questions from users, I found that requests usually are very similar, so, I write some css tips which allows customize table. You should add these tips to custom css area of your theme. If you don’t have such area, try to search plugin Custom Css.
How to disable hover styles
.wpsm-comptable td:hover, .wpsm-comptable td.betterhover, .wpsm-comptable tr:hover td {
background-color: transparent;
}
How to disable min width of cell
By default, each cell has minimal width to prevent collapsing of cells when there is no content, but sometimes this can be a problem. For example, if you want to have small width cells.
.wpsm-comptable td {
min-width: 1px !important;
}
How to make custom width of first column
By default, table fits whole width of container and divide all columns to equal width. Sometimes you need to have width of first (or another) column with definite width.
.wpsm-comptable td:first-child{width:100px !important}
If you need width for another column
.wpsm-comptable td:nth-child(2){width:100px !important}
How to style special cell or row
You can use similar code to style row or column. This is example of styling all cells of second row
.wpsm-comptable tr:nth-child(2) td{background-color:#eee}
This is code for styling second column
.wpsm-comptable td:nth-child(2){background-color:#eee}
How to reduce font size
By default table will have font size the same as your content in theme. You can reduce it
.wpsm-comptable{font-size:85%}
How to change fonts in table
.wpsm-comptable{font: 13px/18px Arial}
In this code I added font family Arial with 13px size and 18px line height.
How to add customizations for special page
WordPress adds special class to all post or page and you can use it to style table on specific page. Use code as above, but add additional class.
For posts, class will be postid-163, for pages pageid-163, where 163 is ID of page or post.
Example
.postid-163 .wpsm-comptable td:nth-child(2){background-color:#eee}
How to change green border of selected row
.wpsm-comptable .editor_selected_row td:not(.st-key):not(.st-val) {
border-bottom: 3px solid #77B21D;
border-top: 3px solid #77B21D;
}
.wpsm-comptable .editor_selected_row td:first-child {
border-left: 3px solid #77B21D;
}
.wpsm-comptable .editor_selected_row td:last-child {
border-right: 3px solid #77B21D;
}
Change #77B21D to your own color
How to change green border of selected column
.wpsm-comptable th.editor_selected_col {
background-color: #77B21D !important;
color: #fff !important;
}
.wpsm-comptable td.editor_selected_col, .wpsm-comptable th.editor_selected_col {
border-left: 3px solid #77B21D;
border-right: 3px solid #77B21D;
}
.wpsm-comptable tr:last-child td.editor_selected_col {
border-bottom: 3px solid #77B21D;
}
Hello
The plugin is perfect! I have it connected directly to my site.
Only I have a problem with the responsive design:
I am forced to the left perpendicular to write the product. When I write the table like this: http://baby-hochstuhltest.de/treppenhochstuhl-test-2015/ then this is set up incorrectly in Responsive Design.
It would be great if you could change this for both variants.
Hi Rene! You are getting responsiveness error because it seems that you are adding this table to custom website! You need to focus on responsive code for Mobile targets!
How do we disable the gray lines that are used to compare lines?
Not sure what grey lines do you mean. Can you give me screenshot?
How to disable grey lines which highlight the rows and columns?
.wpsm-comptable td:hover, .wpsm-comptable td.betterhover, .wpsm-comptable tr:hover td{background-color:#fff}
Place this code in yout theme files
I tried creating some CSS for vertical-align: top; but it did not work. Is there an easy way to do this in the plugin’s admin page?
Ok. checked. Your code is very simple. Just add in your theme or at any place for custom css
.wpsm-comptable td{vertical-align: top !important}
Thanks!
Do you have live link?
Nice job! Great plugin.
I would probably send you a nice donation if it was capable of letting the visitor add or remove columns.
But this is static table plugin constructor. How users can add columns to static table? If you need dynamic comparisons of products/post’s data you need another plugin. For example, our theme Rehub has such constructor.
Very well done sir, this seems to be a finest table plugin for price comparison site. Thanks a lot 🙂
Thanks again for the great plugin. I have an image I would like to be bigger inside the table. How can I accomplish this? html sizing code does not work. http://earlydevelopment.org/
Hi. Yes, plugin has some image limitation to prevent stretching of table. You can simply deactivate it with such css code
.wpsm-comptable td img{max-width:2000px !important; max-height: 2000px !important}
Place this code in your theme or in custom css section of theme
Thank you!
Hi, thanks for the great plugin. I just installed it and so far I am enjoying it.
Just a quick question, how can I add buttons? Will I need to install any additional editor or plugin for that? Right now I am using Visual Composer and I am not getting any options at the bottom-left to add buttons like the way it shows in the “how plugin works” video.
Would be great if someone from your team can help me with this. Best!
By default, button shortcodes are visible only if you use our themes + some additional things. But plugin is shortcode friendly. You can create button with VC on draft page and copy just shortcode button, then insert in table as text. Table will generate your button
Thank you for quick reply. I will give it a try.
I have followed instructions in the tutorial to create a table, but I am having a small issue. I can’t see header row at all and lines for the far right column and bottom row are missing.
Here are the screenshots for your reference
http://prntscr.com/a01zz6
http://prntscr.com/a0202b
Any suggestion on fixing this error?
I need live link to page with table to check it
Thank you! I just you guys a live link in an email at : sizamtheme@gmail.com
Please let me know if you need me to send it to any other email address.
Hello! Are you guys still updating this wonderful plugin? I’ve tested it and I simply love. Just what I’m looking for!
Yes. There are some things in TODO which we will add. For example, sticky header for table
is there an estimated date for Sticky Header?
I think near month
Is the sticky header still on your TODO?
yes, but currently, we don’t have enough time for plugin updates, sorry
Great plugin!
Is there any code I can add to remove padding and reduce the cells/font size so the entire table is smaller? Thanks in advance!
.wpsm-comptable th, .wpsm-comptable td{padding:5px; min-width:10px !important}
Place this code in css of your theme
Thanks for helpful article, I always looking way to make a responsive comparison table and found this post. What is the theme Wpsoul using ?
It’s Rehub theme with some small header customizations
Is there a way to change the width of the cells to remove extra space?
.wpsm-comptable th, .wpsm-comptable td{min-width:1px !important}
Add to your css files of theme
Why Have custom CSS removed 🙁 ?
There is no custom css field in plugin
Does it support RTL languages ” I mean Arabic ” ?
There is no limits in table structure, so, you can set each columns as RTL.
Hi there,
bought your plugin on codecanyon and I love it.
One thing I would like to change, how can I stop the “hover-effect” on the table. So the table to stay like it is without hovering?
Please see my table at dow.innotag-internetagentur.de
Thank you very much for your help.
Regards,
Jasmin
Hi. But I don’t sell any plugins on Codecanyon. Table Maker plugin is totally free, maybe you bought something another
How to change background color of the table or just one column? Thank you.
.wpsm-comptable{background-color:#color}
For columns
.wpsm-comptable tr:nth-child(2){background-color:#color}
this is example of custom background for second row
.wpsm-comptable tr td:nth-child(2){background-color:#color}
this is exmample for custom color of second column
How can I change the size of the column itself? Changing the colour of the header doesn`t work by selecting another colour. Is there a trick, too?
provide link, I will check
Hi @WPSOULADMIN,
find link here http://dow.innotag-internetagentur.de/2007-2/
I would like the hover effect to totally disappear.
Thank you