Versus Comparison Table w/ TablePress

Transform any TablePress table into in an awesome head-to-head comparison table. This table includes a fixed (sticky) header, product image and ‘buy’ button, and collapses perfectly to fit small screens.

Free resources included:

  • Custom CSS
  • Free Template(s)
Get Freebies

Here you’ll find the CSS code used in the tutorial, organized into a few separate components.

CSS Code Included:

  • Primary table styles
  • Sticky table header
  • Responsive mode

Usage: Create a 3-column table in tablepress and add ‘compare’ as a custom CSS class name, or adjust the CSS code to match your own class or table ID.

Get the Code

Comparison Table CSS

.tablepress.compare {
    border: 1px solid #ddd;
}

.tablepress.compare tbody td.column-1 {
    background-color: #eaeaea;
    font-weight: 500;
    font-size: 16px;
}

.tablepress.compare td:not(.column-1) {
    font-size: 14px;
    text-align: center;
}

.tablepress.compare th.column-1 {
    font-size: 24px;
    padding: 12px 18px;
    text-align: center;
    background: linear-gradient(to right, #50ffb6, #15e6dc);
}

.tablepress.compare .column-3 {
    border-left: 1px solid #ddd;
}

.tablepress.compare .column-2, .tablepress.compare .column-3 {
    width: 37.5%;
}

/* Product Buy-button (optional) */
.tablepress.compare .row-2 a {
    background-color: gold;
    font-weight: bold;
    color: black;
    padding: 2px 8px;
    border-radius: 3px;
}

/* VS span in the header (optional) */
.tablepress.compare thead span {
    color: white;
    text-shadow: 2px 0 black;
}Code language: CSS (css)

Responsive Mode:

This collapses the 1st column and wraps it above columns 2 and three. You can use the same technique to make all the columns full width on mobile if you like. 

/* Adjust the 'max-width' property to change the breakpoint */
@media screen and (max-width: 700px){
    
    .tablepress.compare .column-2, .tablepress.compare .column-3 {
        width: 50%;
    }
    
    .tablepress.compare td {
        display: inline-block;
        text-align: center;
        background-color: white;
    }
    
/* Make column-1 be full-width */
    .tablepress.compare .column-1 {
        width: 100%;
    }
}Code language: CSS (css)

Sticky Table Header

.tablepress.compare tr.row-2 {   /* choose a row number to stick */     
    position: sticky;  /* make it stick */
    top:0;  /* Set the offset (required) */
    box-shadow: inset 0 -1px #ddd; /* fake border */
}Code language: CSS (css)

Leave a Comment