Best Responsive Pricing Table

Best Responsive Pricing Table

Best Responsive Pricing Table which shows the perfect grid as a comparison table based on your products and in smaller responsive screens it just collapses and turns into a tabular view which shows clean simple tabs and user can very easily see complete table data.

Also there is a small piece of jQuery code which makes this responsive pricing table very easy to implement and use. It is very light weight in terms of page or site loading speed and won’t cause any issues for speed optimization, as checked in tools such as Google PageSpeed Score and Pingdom Tools.

Desktop View:

Responsive Pricing Desktop View
Responsive Pricing Desktop View

 

Mobile View:

Responsive Pricing Table Mobile View
Responsive Pricing Table Mobile View

HTML:

<article>

<ul>
<li class="bg-purple active">
<button>Self-Employed</button>
</li>
<li class="bg-blue">
<button>Simple Start</button>
</li>
<li class="bg-blue">
<button>Essentials</button>
</li>
<li class="bg-blue">
<button>Plus</button>
</li>
</ul>

<table>
<thead>
<tr>
<th class="hide"></th>
<th class="default">Startup</th>
<th class="">Growth</th>
<th class="">Scale</th>
<th class="">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Recommended for companies with...</td>
<td class="default">up to 20 code contributors </td>
<td>up to 40 code contributors </td>
<td>up to 100 code contributors </td>
<td>up to 20 code contributors </td>
</tr>
<tr>
<td>Test Runs per Month</td>
<td class="default">up to 100</td>
<td>up to 200</td>
<td>up to 300</td>
<td>Custom </td>
</tr>
<tr>
<td>Test Scenarios per Run</td>
<td class="default">up to 200</td>
<td>up to 400</td>
<td>up to 500</td>
<td>Custom </td>
</tr>
<tr>
<td>Concurrency (# of Servers)</td>
<td class="default">up to 300</td>
<td>up to 400</td>
<td>up to 500</td>
<td>Custom </td>
</tr>
<tr>
<td># of Applications to be Tested</td>
<td class="default">3</td>
<td>5</td>
<td>10</td>
<td>Custom</td>
</tr>

</tbody>
</table>

</article>

CSS:

article {
width:100%;
max-width:1000px;
margin:0 auto;
height:1000px;
position:relative;
}
ul {
display:flex;
top:0px;
z-index:10;
padding-bottom:14px;
}
li {
list-style:none;
flex:1;
}
li:last-child {
border-right:1px solid #DDD;
}
button {
width:100%;
border: 1px solid #DDD;
border-right:0;
border-top:0;
padding: 10px;
background:#FFF;
font-size:14px;
font-weight:bold;
height:60px;
color:#999
}
li.active button {
background:#F5F5F5;
color:#000;
}
table { border-collapse:collapse; table-layout:fixed; width:100%; }
th { background:#F5F5F5; display:none; }
td, th {
height:53px
}
td,th { border:1px solid #DDD; padding:10px; empty-cells:show; }
td,th {
text-align:left;
}
td+td, th+th {
text-align:center;
display:none;
}
td.default {
display:table-cell;
}
.bg-purple {
border-top:3px solid #A32362;
}
.bg-blue {
border-top:3px solid #0097CF;
}
.sep {
background:#F5F5F5;
font-weight:bold;
}
.txt-l { font-size:28px; font-weight:bold; }
.txt-top { position:relative; top:-9px; left:-2px; }
.tick { font-size:18px; color:#2CA01C; }
.hide {
border:0;
background:none;
}

@media (min-width: 640px) {
ul {
display:none;
}
td,th {
display:table-cell !important;
}
td,th {
width: 330px;

}
td+td, th+th {
width: auto;
}
}

jQuery:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

$( "ul" ).on( "click", "li", function() {
var pos = $(this).index()+2;
$("tr").find('td:not(:eq(0))').hide();
$('td:nth-child('+pos+')').css('display','table-cell');
$("tr").find('th:not(:eq(0))').hide();
$('li').removeClass('active');
$(this).addClass('active');
});

var mediaQuery = window.matchMedia('(min-width: 640px)');

</script>

DemoDownload

You may also like