Add responsive comparison table to wordpress

Attention. This plugin is outdated and not supported, please, check actual plugin Greencon which has table constructor and much more possibilities

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

Check video how plugin works

You can download plugin from wordpress repository

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


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.


.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;


3.8/5 - (116 votes)

  1. 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: 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!

  2. How do we disable the gray lines that are used to compare lines?

  3. 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?

  4. 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.

  5. Very well done sir, this seems to be a finest table plugin for price comparison site. Thanks a lot 🙂

  6. 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.

    • 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

  7. 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

  8. 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

    Any suggestion on fixing this error?

  9. Thank you! I just you guys a live link in an email at :

    Please let me know if you need me to send it to any other email address.

  10. Hello! Are you guys still updating this wonderful plugin? I’ve tested it and I simply love. Just what I’m looking for!

  11. 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

  12. Thanks for helpful article, I always looking way to make a responsive comparison table and found this post. What is the theme Wpsoul using ?

  13. Is there a way to change the width of the cells to remove extra space?

  14. Why Have custom CSS removed 🙁 ?

  15. Does it support RTL languages ” I mean Arabic ” ?

  16. 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

    Thank you very much for your help.



    • Hi. But I don’t sell any plugins on Codecanyon. Table Maker plugin is totally free, maybe you bought something another

  17. 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

  18. 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

        I would like the hover effect to totally disappear.

        Thank you

        • You have correct code

          .wpsm-comptable td:hover, .wpsm-comptable td.betterhover, .wpsm-comptable tr:hover td{background-color: transparent !important;}

          Problem is that in your theme there is no background for container and this makes row as background color which is grey

          You can change to .wpsm-comptable td:hover, .wpsm-comptable td.betterhover, .wpsm-comptable tr:hover td{background-color: #fff !important; }


    find link here

    I would like the hover effect to totally disappear.

    Thank you

  20. What is the max amount of rows the table maker can handle? Because it allows me to create as many rows as I want, but any info in rows after 197 as soon as I save changes they all disappear along with last to column info in row above. I am using this to create a table of all our products available, but this issue is causing me a big problem, especially since I have to upload at least 5000 products to said table.
    Here is a direct link to table I am creating:

    • This plugin is for comparisons and for simple good looking tables. If you have more than 200 rows, it’s better to use table data plugins, like TablePress


    This plugin is great, I was wondering if tehre’s any CSS I can use to make the table a little smaller or font smaller so it fits in the display on my phone. Right now it’s getting cut-off.

  22. I also need to know if there is any short code to make table on front end to automatically sort from a to z on its own, because we will uploading new product and removing old product all the time, but want our list/table to show to viewer in alphabetical order at all times. Thanks in advance!

    • There is no such option. This plugin is for static simple tables. if you need sorting and other extended things it’s better to use TablePress

  23. Hello,
    As I can delete thead??

  24. Do you have a list of custom code.
    How can I make table border thicker, diff color maybe, remove top colored row, etc.?

  25. Hi,

    How can I just import the contents of an Excel table into a pre-designed table? How to do it for full rows/columns?


  26. Hello,
    This is good, can i create tables on the fly? i mean i want the table to be updated automatically everyday,can i upload files automatically with contents to update the tables daily?

  27. How do I merge columns or rows?

  28. Hi,
    Somehow my table header is not in the middle and the center of box.

    Please check it for me.

  29. nvm, I found my solution ^^!

  30. How to change the color of the yellow boarder, where you have the cameras listed? What code is it?

  31. I can also notify you that adding customizations css for special pages in wp doesnt work…

    .postid-163 .wpsm-comptable td:nth-child(2)

    I replace 163 with my unique post-id. Still doesn’t change the other table I make, regardless of what I put in it:


    .pageid-94 .wpsm-comptable td:first-child{width:180px !important}
    .pageid-94 .wpsm-comptable td:nth-child(4){width:100px !important}
    .pageid-94 .wpsm-comptable td:nth-child(6){width:200px !important}
    .pageid-94 .wpsm-comptable td:nth-child(7){width:200px !important}

    Whats wrong?

  32. Is it possible to make the last added row to display first in table?

    – without using “switch rows” option, is there any short code to make this possible?

  33. Hi Admin, great app!

    Unfortunately, I’m having trouble setting custom widths for multiple tables. I’ve inputted the following into Custom CSS:

    .wpsm-comptable td:first-child{width:30% !important}
    .wpsm-comptable td:nth-child(2){width:15% !important}
    .wpsm-comptable td:nth-child(3){width:15% !important}
    .wpsm-comptable td:nth-child(4){width:40% !important}

    …which work great for one of my tables. However, I’ve created a second table that it looks awful for.

    I don’t see any ID assignments above to apply different widths to different tables. Could you please advise?

    I appreciate it!

  34. Am having issues seeing special rows on the front end. Any tips on how to fix this?

  35. Hi is it possible to hide the column titles in the responsive view so there is only one column and not two?

    I would happily pay you to help me achieve this 😀

  36. HI, first of all wonderful job! Just would like to know if is possible to make the second row text bold and change it’s background color? I’ve tried this, but not succeed:

    .wpsm-comptable tr:nth-child(2){background-color:#ff0000}

    Thanks in advance!

  37. Like many of the people posting, here, the CSS to change the column width is not working for me.
    .wpsm-comptable td:first-child{width:100px !important}
    .wpsm-comptable td:nth-child(2){width:100px !important}
    .wpsm-comptable td:nth-child(3){width:100px !important}
    .wpsm-comptable td:nth-child(4){width:100px !important}
    .wpsm-comptable td:nth-child(5){width:100px !important}
    .wpsm-comptable td:nth-child(6){width:100px !important}
    .wpsm-comptable td:nth-child(7){width:100px !important}

  38. How can you add links within a cell?

  39. Great work!
    may you apply shortcode also on th?

  40. Really nice work.
    I am asking if it is possible to change the text-content of the editors choice. Right now it says “Editors Choice”.

  41. Love this plugin! Looking to (1) remove the main title row and (2) change the color of the title row and/or the subtitle row(s)… thanks so much for your help!

  42. can u say how i can change the text “editor’s choice” in the Icon?

  43. The css code is it for a specific table or it applies to all tables? If it’s the latter, how do I specify different column width size for different tables?

  44. My bullets are not coming in an aligned manner ,what should i do?

  45. Hi,

    is this possibele to fixed the first column? like the comparison chart table from rehub theme?

    i can give a credit to you if you van make this to work 🙂

    best greetings

  46. What’s different between this plugin with other plugins such as Tablepress?

  47. Oh my goodness! Incredible article dude! Many thanks, However I am encountering troubles with your RSS. I don’t know the reason why I can’t subscribe to it. Is there anybody else getting similar RSS problems? Anyone who knows the answer will you kindly respond? Thanks!!

  48. Can you also use a filtering panel in combination with this table?

  49. Hi!
    Great plugin. Many thanks for that.

    I would like to have black as a background and white text.
    The frame and all the lines of the table should also be black (or simply no color / transparent).

    Thank you for your help!

  50. Hi is there a way that i can modify the color of the header to a shade different from the ones that have been provided in the plugin? What would be the shortcode for that? And can i also change the font color in the header? Thanks

  51. Hey, thanks for the great plugin man, Everything is fine but I would like to know if there are any possible ways to show only specific columns on mobile devices. Example, if i have 5 columns in desktop version and want to show only 3 columns in mobile devices, is there any CSS or could you please suggest plugin?

  52. Hi there – just downloaded Table Maker. Is there a user guide?



  53. Installed the latest update and all 28 tables gone! WTF :O

  54. All of my tables now are gone after you update the plugins. It’s so frustrating!

  55. Hi, is there any way to change font colour of title (1st row) to white while the rest stays black for all tables?

    • You can create css customization by yourself, as it’s free plugin we don’t provide any help with customization

  56. Hi — Great plugin! Wondering if there’s a way to change the vertical alignment of text in the columns?

  57. Hi. Just discovered this cool plugin but I am having problems making it to work. I follow your video guide to create a comparison table complete with images and features but when I paste the code on my site, I get an error message asking for table ID. I am unable to figure out where to get the table ID without which the table does not render. Any help will be appreciated Here is the error I get “table maker test
    January 14, 2018 by gh
    Please specify the table ID”

  58. I tried adding various custom css you supplied, but nothing changes. Is it possible my theme is over-riding? Is so, how can I over-ride?

  59. How does the image in the center of the table

  60. Dont really know what to say. 6 hours and still have nothing to show for it.
    1- Edit changes, click save changes, table deletes new information and resorts back to old save.
    2- Table constantly getting cut off on the website, even when i use your codes to change table size.
    3- none of the codes work when put into css


    How to add the background grey colour which shows up as the border for the images in the first coloumn.

  62. I have used plugin Thrive Architect with price expensite for make comparison table in my wordpress website but when I see your post i think this is amazing to make beautiful comparison table with code.
    Thank you so much 🙂

  63. Thanks a lot.

    I would pay for this plugin if it offered more customization (e.g. header), I think it has a lot of potential!

  64. Great,it works excellent on my website,please check this ,I’ll show you how I make it

  65. Highly recommended than using tablepress

  66. Just Awesome Bro! Forget about TOC+!

  67. What is the short code for button?

  68. Hey there,

    I have installed the plugin successfully, but when I create tables: the table is not been created. how can fix it?

  69. hello I have migrated my site from digital ocean to google cloud with all in wordpress plugins. Every single piece of file is migrated except tables. The complete site is migrated same as it was before. Only tables are missing, The plugin is there on the site. But only tables are missing. I have more than 20 large tables. How do I recover my tables.

  70. hello I have migrated my site from digital ocean to google cloud with (All In One MIGRATED plugin). Every single piece of file is migrated except tables. The complete site is migrated same as it was before. Only tables are missing, The plugin is there on the site. But only tables are missing. I have more than 20 large tables. How do I recover my tables.

  71. Hey, Great work!
    may you apply shortcode also on this?

  72. The plugin is very perfect. This is what I’m looking for.

    I tried to make a table like this but it wasted a lot of time. This help me a lot.

    Thank you so much for your sharing.

  73. Great plugin!

    Can you remove the header row in both desktop and mobile view?

    This only works on desktop
    .wpsm-thead {display: none !important;}

    Also, how to add buttons? The shortcode in the video is gone.

  74. Hi

    Is posible inport csv file . ant also linke icture. We nead for scoring of ouer athlets..

    Thank you

    • it’s not for importing tables. Also, this plugin is not supported, we are working on more fresh plugin-extension for Gutenberg

  75. Hi, Table Maker is amazing plugin. Perfect and very responsive. Thanks

    I am facing a small problem with alignment.I have created 2 tables in my article.

    I have put custom css based on postid.

    1. One Table (center aligned) has 4 Columns and 4 Rows and i have left aligned text in the 4th row using custom css.

    2. Second Table Has 3 Columns and 12 Rows (In this table i have aligned 2nd column left aligned using css)

    Now, the problem is all contents in 4th row in second table are also left aligned and contents in Second column of first table are also aligned.

    Can I have a custom css code based on table ID, not post ID? If can have custom css based on table id then i will change as per my requirement.

    Please Advice

    Check attached image for Screenshot

    • Currently, it’s outdated plugin. We don’t support it, but we will make Gutenberg version, it’s almost ready, we need to move only styles from theme to make it working on other themes

        Just wondering if you have a timeframe for the release of a Gutenberg version of Table Maker? Is this going to be a standalone plugin or included only in the Rehub theme?
        Table Maker is a great plugin, but without the CSV import working its hard work making large tables.

        • it’s available in theme as Offer listing module. Currently we decided to make full functional Affiliate helper plugin, then release it. We don’t see reason to make just table plugin. You can find few Table maker Gutenberg plugins on WordPress, including affiliate table plugins

  76. Hi, I have two questions.

    1) Are you making a new version of this plugin for Classic Editor?

    2) I know it’s an outdated version and you are not supporting it, is it still works fine with the classic editor?


  77. unfortunately, I can;t create a table. It doesn’t save.

  78. Does ths come in a Gutenberg version?

  79. it’s available in theme as Offer listing module. Currently we decided to make full functional Affiliate helper plugin, then release it.

  80. it’s very useful post to create the responsive comparison table in wordspress. I found the complete detail here .

Leave a reply

Wordpress optimization, monetizing tips and tricks