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

.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