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)

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 {
    border: 1px solid #ddd;
} tbody td.column-1 {
    background-color: #eaeaea;
    font-weight: 500;
    font-size: 16px;
} td:not(.column-1) {
    font-size: 14px;
    text-align: center;
} th.column-1 {
    font-size: 24px;
    padding: 12px 18px;
    text-align: center;
    background: linear-gradient(to right, #50ffb6, #15e6dc);
} .column-3 {
    border-left: 1px solid #ddd;
} .column-2, .column-3 {
    width: 37.5%;

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

/* VS span in the header (optional) */ 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){ .column-2, .column-3 {
        width: 50%;
    } td {
        display: inline-block;
        text-align: center;
        background-color: white;
/* Make column-1 be full-width */ .column-1 {
        width: 100%;
}Code language: CSS (css)

Sticky Table Header 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