CSS Responsive Comparison Table

Introduction

Creating a responsive comparison table in CSS is key to a great user experience across devices. Comparison tables are used to present lots of information side by side so users can make informed decisions. With more and more people using mobile devices, making sure your comparison table adapts to different screen sizes is a must.

Why Comparison Tables Are Important

Comparison tables are a fundamental feature on websites, especially in e-commerce, service based platforms and informational sites. They allow users to compare multiple options side by side so they can make informed decisions without having to navigate through multiple pages. For businesses, comparison tables increase transparency and provide a structured way to highlight the unique selling points of products or services. In competitive markets, well designed tables can really boost user trust and conversion rates by making complex information easy to digest at a glance.

Key Features of a Responsive Table

• Scalability: Adapts to different screen sizes.
• Usability: Works on smaller screens.
• Aesthetics: Doesn’t overcrowd.

Coding Part

HTML Structure

At this part you add your website’s content and structure. Be sure to include the special tags (classes) that, together with the paired CSS, will make your content look the way you want.

<div class="sf-comparison-table">

    <ul class="row row-header">
      <li class="row-label"></li>
      <li>
          <h4 class="product-title">Product A</h4>
          <p class="price">$299</p>
          <p class="small-text">Lorem ipsum dolor sit amet, consectetur.</p>
      </li>
      <li>
          <h4 class="product-title">Product B</h4>
          <p class="price">$289</p>
          <p class="small-text">Eiusmod tempor incididunt ut labore aliqua.</p>
      </li>
      <li>
        <h4 class="product-title">Product C</h4>
        <p class="price">$329</p>
        <p class="small-text">Duis aute irure dolor in reprehenderit velit</p>
      </li>
    </ul>

    <h6 class="row-subtitle">Dimensions</h6>

    <ul class="row">
        <li class="row-label">Screen Size</li>
        <li>6.5"</li>
        <li>6.8"</li>
        <li>6.3"</li>
    </ul>
    <ul class="row">
        <li class="row-label">Weight</li>
        <li>190 g</li>
        <li>210 g</li>
        <li>180 g</li>
    </ul>
    
    <h6 class="row-subtitle">Technical Specifications</h6>
    
    <ul class="row">
        <li class="row-label">Operating System</li>
        <li>OS A</li>
        <li>OS B</li>
        <li>OS C</li>
    </ul>
    <ul class="row">
        <li class="row-label">Processor</li>
        <li>Chip A1</li>
        <li>Chip B2</li>
        <li>Chip C3</li>
    </ul>
    <ul class="row">
      <li class="row-label">Touchscreen</li>
      <li><i class="fa-solid fa-check yes"></i></li>
      <li><i class="fa-solid fa-check yes"></i></li>
      <li><i class="fa-solid fa-xmark no"></i></li>
    </ul>
    <ul class="row">
        <li class="row-label">Storage</li>
        <li>128 GB</li>
        <li>256 GB</li>
        <li>128 GB</li>
    </ul>
    
    <h6 class="row-subtitle">Features</h6>
    
    <ul class="row">
        <li class="row-label">Water Resistance</li>
        <li>IP68</li>
        <li>IP67</li>
        <li><i class="fa-solid fa-xmark no"></i></li>
    </ul>
    <ul class="row">
        <li class="row-label">5G Support</li>
        <li><i class="fa-solid fa-check yes"></i></li>
        <li><i class="fa-solid fa-check yes"></i></li>
        <li><i class="fa-solid fa-xmark no"></i></li>
    </ul>
    
    <h6 class="row-subtitle">Price</h6>
    
    <ul class="row">
        <li class="row-label">Price</li>
        <li>$800</li>
        <li>$1000</li>
        <li>$500</li>
    </ul>

    <ul class="row row-footer">
        <li class="row-label"></li>
        <li><a class="button" href="#">Buy now</a></li>
        <li><a class="button" href="#">Buy now</a></li>
        <li><a class="button" href="#">Buy now</a></li>
    </ul>

</div>

Styling the CSS Comparison Table

This part is essential if we’re talking about how effects of your snippet will be visible at the front side of the page. Style it as you wish, and feel free to play with it.

/* --------------------------------------- */
/*  Snippflow Responsive Comparison Table  */
/* --------------------------------------- */

.sf-comparison-table {
  --sf-skill-title-color: #304050;
  --sf-skill-row-label: #172029;
  --sf-skill-row-bg: #fdfdfd;
  --sf-skill-row-hover-bg: #46a787;
  --sf-skill-row-hover-color: #fff;
  --sf-skill-row-subtitle: #46a787;
}

.sf-comparison-table { display: flex; flex-direction: column; width: 100%; max-width: 100%; margin: 0 auto; }
.sf-comparison-table * { box-sizing: border-box }
.sf-comparison-table .product-title {font-size: 18px; font-weight: 500; color: var(--sf-skill-title-color) }
.sf-comparison-table .price { border: 1px solid; display: inline-flex; padding: 5px 15px; border-radius: 20px; font-size: 18px; }
.sf-comparison-table .small-text { font-size: 85%; opacity: .65; }
.sf-comparison-table .row-subtitle { color: var(--sf-skill-row-subtitle); margin: 0; padding: 20px; font-size: 18px; font-weight: 400; }
.sf-comparison-table ul.row{ list-style: none; display: flex; flex: 1; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; width: 100%; min-height: 50px; padding: 5px 0; border-radius: 4px; }
.sf-comparison-table ul.row li{ flex: 1; padding: 0 20px; line-height: 1.2; margin: 0; text-align: center; }
.sf-comparison-table ul.row li.row-label { color: var(--sf-skill-row-label); border: none; width: 200px; text-align: left; font-weight: 500; }
.sf-comparison-table ul.row:nth-child(odd):not(.row-header, .row-footer) { background-color: var(--sf-skill-row-bg); }
.sf-comparison-table ul.row:not(.row-header, .row-footer):hover { background-color: var(--sf-skill-row-hover-bg); color: var(--sf-skill-row-hover-color); }
.sf-comparison-table ul.row:not(.row-header, .row-footer):hover .row-label { color: var(--sf-skill-row-hover-color); }
.sf-comparison-table ul.row:first-of-type { align-items: flex-start; }
.sf-comparison-table ul.row:first-of-type li { padding: 0 10px; }
.sf-comparison-table ul.row:first-of-type li > *:last-child { margin-bottom: 0; }
.sf-comparison-table ul.row:last-of-type li { padding: 20px 10px 0; }

.sf-comparison-table .yes,
.sf-comparison-table .no { display: inline-flex; align-items: center; justify-content: center; color: #fff; width: 20px; height: 20px; border-radius: 100%; font-size: 10px; }
.sf-comparison-table .yes {  background-color: #34b534; }
.sf-comparison-table .no { background-color: #ea4f4f; }

.sf-comparison-table a.button { display: flex; justify-content: center; padding: 12px 15px; background: #46a787; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all .3s ease-in-out; }
.sf-comparison-table a.button:hover { background-color: #4eba96; }

@media only screen and (max-width: 767px){

    .sf-comparison-table h6.row-subtitle { text-align: center; }
    .sf-comparison-table ul.row{ flex-wrap: wrap;  min-height: 50px; padding: 20px 0; }
    .sf-comparison-table ul.row li.row-label { width: 100%; text-align: center; margin-bottom: 10px; }
    .sf-comparison-table ul.row li { width: 33.3%; flex: auto; padding: 0 5px; }
    .sf-comparison-table ul.row:last-of-type li.row-label { display: none; }

}

Result

See the Pen CSS Responsive Comparison Table by Snippflow (@snippflow) on CodePen.

Extras

Tips

• Keep table complexity to a minimum for faster loading.
• Test responsiveness regularly to ensure usability.
• Use clear text for easy reading.