<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"> </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;
}
}
This Pen doesn't use any external CSS resources.