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