<p> A responsive product comparison table, with only HTML and CSS <br/><a href="https://www.gsarigiannidis.gr/responsive-product-comparison-table-html-css-no-js/" target="_blank">Read the details</a>
</p>
<div class="container">
  <table class="products-4">
  <thead>
    <tr>
      <th class="label">&nbsp;</th>
      <th>
        <img src="https://via.placeholder.com/80x100" alt="">
        <h3>Product 1</h3>
      </th>
      <th>
        <img src="https://via.placeholder.com/80x100" alt="">
        <h3>Product 2</h3>
      </th>
      <th>
        <img src="https://via.placeholder.com/80x100" alt="">
        <h3>Product 3</h3>
      </th>
      <th>
        <img src="https://via.placeholder.com/80x100" alt="">
        <h3>Product 4</h3>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
    <tr>
      <td class="heading" colspan="5"><span>Heading</span></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
    <tr>
      <td class="heading" colspan="5"><span>Heading</span></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
    <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
    <tr>
      <td class="heading" colspan="5"><span>Heading</span></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
    <tr>
      <td class="heading" colspan="5"><span>Heading</span></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
    <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
    <tr>
      <td class="heading" colspan="5"><span>Heading</span></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
    <tr>
      <td class="heading" colspan="5"><span>Heading</span></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
     <tr>
      <td class="label">Label</td>
      <td><div class="spec" spec-title="Label">Spec 1</div></td>
      <td><div class="spec" spec-title="Label">Spec 2</div></td>
      <td><div class="spec" spec-title="Label">Spec 3</div></td>
      <td><div class="spec" spec-title="Label">Spec 4</div></td>
    </tr>
  </tbody>
</table>
</div>
* {
  box-sizing: border-box; 
}
body { /* Just some padding for the demo */
  padding: 0 50px; 
  font-family: 'Roboto', Arial;
  font-weight: 300;
}
p { /* Just some padding for the demo */
  margin-top: 0;
  text-align: center;
}
a {
  color: #1da1f2;
  font-weight: bold;
}
h3 {
  margin: 0;
}
.container {
  background: #fff;
  max-height: calc(100vh - 80px);
  overflow: auto;
}
table {
}
th {
  position: sticky; /* Make th sticky to avoid JavaScript */
  z-index: 1;
  border: 1px solid;
  top: 0;
}
td,
th {
  padding: 10px;
  min-width: 200px; /* Add a minimum width below which no resize is allowed (for small screens). It can be whatever serves the design best */
  text-align: center;
}
.products-4 th,
.products-4 td {
    width: 25%; /* Depending on the number of products in comparison, different classes should be used (e.g. 3 products should have a .products-3 class with a width of 33.333%) */
}
th {
  background: #eee;
  top: -2px; /* We need this to attach the "stuck" attribute */
}
th img {
  height: 0;
    margin: 0 auto;
      display: block;
  transition: height 200ms ease-in-out;
}
.sticky img {
  height: 100px;
}
.label {
  font-weight: bold;
  text-align: left;
  min-width: 150px; /* Labels should have a strict width, based on the design (150px is just for this demo) */
  width: 150px; /* In order to enforce the width we need to apply both a min-width and a width with the same value */
  background: #eee;
}
th.label {
  background: #fff;
  border-color: #fff;
}

.heading {
  background: #ccc;
  width: 100%;
  text-align: left;
  position: relative;
}
.heading span {
  position: sticky;
  top: 0;
  left: 10px;
}
@media all and (max-width: 600px) { /* The breakpoint is indicative. You might want to break it on a different limit */
  body {
    padding: 0; /* Just for the demo */
  }
  .label {
    display: none; /* We want to hide the labels on small screens... */
  }
  .spec::before { /* ...and show them above each spec instead. */
    content: attr(spec-title);
    color: #999;
    display: block;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js