Responsive pricing tables dilemma – Code

Table of Contents

Creating complex responsive pricing tables was the subject of the last post. Today, we are going to look at how this idea I came up with in previous post – individual separate tables with hidden elements on certain screen sizes – works when turned into reality. Surprisingly, it works great! With just a bit more HTML, a lot more HTML in a fact, and about two media queries even complex table such as RiteTag is using can be perfectly responsive.

CodePen - Responsive pricing tables

In order to make this code work on 100%, you will need to include two external fonts. Open sans hosted on Google’s CDN that is used for whole text and font awesome for “check” marks used in one part of the table.

Font Awesome:

http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Open sans:

http://fonts.googleapis.com/css?family=Open+Sans:400,700

Live Demo

Pricing tables – the practice

In this post we are going to look at the HTML and CSS code behind these pricing tables. The HTML part contains four tables each wrapped inside div with class “plan”. These plans are Free 30-day trial, Lite, Pro and Agency (all the data are original from RiteTag). Every plan contains two columns. First is for legend that is always the same, and second is for the specific data related to individual pricing plan. The last thing, plans will be also wrapped by two inside another div with class “plan-container”. Below is HTML code for complete table.

HTML code for pricing tables:

<!-- Wrapper for pricing tables-->
<div class="plan-container">
 <!-- Plan 1 -->
 <div class="plan">
 <table class="table-1">
 <thead>
 <tr>
 <th class="features"></th>
 <th class="lead">Free 30-day trial</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="features">
 <strong>Sent/scheduled tweets </strong>
 </td>
 <td class="data">
 <span class="bignumber">5</span>
 <small class="text-muted">/day</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Active Hashtag Alerts</strong>
 </td>
 <td class="data">
 <span class="bignumber">2</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Twitter Timeline Audits</strong>
 </td>
 <td class="data">
 <span class="bignumber">22</span>
 <small class="text-muted">/month</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Twitter accounts</strong>
 </td>
 <td class="data">
 <span class="bignumber">1</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Facebook accounts</strong>
 </td>
 <td class="data">
 <span class="bignumber">1</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Bit.ly account</strong>
 </td>
 <td class="data">
 <span class="bignumber">NO</span>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Support</strong>
 </td>
 <td class="data">on-site chat</td>
 </tr>
 <tr>
 <td class="features">
 <strong>Color-coded hashtag &amp; tweet grading browser extensions</strong>
 </td>
 <td class="data">Twitter, Buffer, Hootsuite, Tweetdeck, SproutSocial &amp; SocialOomph</td>
 </tr>
 <tr>
 <td class="features">
 <strong>Hashtags analytics</strong>
 </td>
 <td class="data"><i class="fa fa-check"></i></td>
 </tr>
 <tr>
 <td class="features">
 <strong>Mobile Apps included</strong>
 </td>
 <td class="data">-</td>
 </tr>
 <tr>
 <td class="features">Billed yearly:</td>
 <td class="data">Free 30-day trial</td>
 </tr>
 <tr>
 <td class="features">Billed monthly:</td>
 <td class="data">Free 30-day trial</td>
 </tr>
 <tr>
 <td class="features"></td>
 <td class="data">
 <button class="btn btn-primary" type="submit" value="Get Started" role="button">Get Started</button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <!-- Plan 2 -->
 <div class="plan">
 <table class="table-2">
 <thead>
 <tr>
 <th class="features"></th>
 <th class="lead">Lite</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="features">
 <strong>Sent/scheduled tweets </strong>
 </td>
 <td class="data">
 <span class="bignumber">50</span>
 <small class="text-muted">/day</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Active Hashtag Alerts</strong>
 </td>
 <td class="data">
 <span class="bignumber">10</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Twitter Timeline Audits</strong>
 </td>
 <td class="data">
 <span class="bignumber">210</span>
 <small class="text-muted">/month</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Twitter accounts</strong>
 </td>
 <td class="data">
 <span class="bignumber">1</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Facebook accounts</strong>
 </td>
 <td class="data">
 <span class="bignumber">1</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Bit.ly account</strong>
 </td>
 <td class="data">
 <span class="bignumber">NO</span>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Support</strong>
 </td>
 <td class="data">on-site chat</td>
 </tr>
 <tr>
 <td class="features">
 <strong>Color-coded hashtag &amp; tweet grading browser extensions</strong>
 </td>
 <td class="data">Twitter, Buffer, Hootsuite, Tweetdeck, SproutSocial &amp; SocialOomph</td>
 </tr>
 <tr>
 <td class="features">
 <strong>Hashtags analytics</strong>
 </td>
 <td class="data"><i class="fa fa-check"></i></td>
 </tr>
 <tr>
 <td class="features">
 <strong>Mobile Apps included</strong>
 </td>
 <td class="data">Android (iPhone soon)</td>
 </tr>
 <tr>
 <td class="features">Billed yearly:</td>
 <td class="data">10$/mo</td>
 </tr>
 <tr>
 <td class="features">Billed monthly:</td>
 <td class="data">15$/mo</td>
 </tr>
 <tr>
 <td class="features"></td>
 <td class="data">
 <button class="btn btn-primary" type="submit" value="Get Started" role="button">Get Started</button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
</div>
<div class="plan-container">
 <!-- Plan 3 -->
 <div class="plan">
 <table class="table-3">
 <thead>
 <tr>
 <th class="features"></th>
 <th class="lead">Pro</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="features">
 <strong>Sent/scheduled tweets </strong>
 </td>
 <td class="data">
 <span class="bignumber">200</span>
 <small class="text-muted">/day</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Active Hashtag Alerts</strong>
 </td>
 <td class="data">
 <span class="bignumber">50</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Twitter Timeline Audits</strong>
 </td>
 <td class="data">
 <span class="bignumber">950</span>
 <small class="text-muted">/month</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Twitter accounts</strong>
 </td>
 <td class="data">
 <span class="bignumber">3</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Facebook accounts</strong>
 </td>
 <td class="data">
 <span class="bignumber">3</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Bit.ly account</strong>
 </td>
 <td class="data">
 <span class="bignumber">NO</span>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Support</strong>
 </td>
 <td class="data">email + on-site chat</td>
 </tr>
 <tr>
 <td class="features">
 <strong>Color-coded hashtag &amp; tweet grading browser extensions</strong>
 </td>
 <td class="data">Twitter, Buffer, Hootsuite, Tweetdeck, SproutSocial &amp; SocialOomph</td>
 </tr>
 <tr>
 <td class="features">
 <strong>Hashtags analytics</strong>
 </td>
 <td class="data"><i class="fa fa-check"></i></td>
 </tr>
 <tr>
 <td class="features">
 <strong>Mobile Apps included</strong>
 </td>
 <td class="data">Android (iPhone soon)</td>
 </tr>
 <tr>
 <td class="features">Billed yearly:</td>
 <td class="data">25$/mo</td>
 </tr>
 <tr>
 <td class="features">Billed monthly:</td>
 <td class="data">35$/mo</td>
 </tr>
 <tr>
 <td class="features"></td>
 <td class="data">
 <button class="btn btn-primary" type="submit" value="Get Started" role="button">Get Started</button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <!-- Plan 4 -->
 <div class="plan">
 <table class="table-4">
 <thead>
 <tr>
 <th class="features"></th>
 <th class="lead">Agency</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="features">
 <strong>Sent/scheduled tweets</strong>
 </td>
 <td class="data">
 <span class="bignumber">∞ Unlimited</span>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Active Hashtag Alerts</strong>
 </td>
 <td class="data">
 <span class="bignumber">∞ Unlimited</span>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Twitter Timeline Audits</strong>
 </td>
 <td class="data">
 <span class="bignumber">∞ Unlimited</span>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Twitter accounts</strong>
 </td>
 <td class="data">
 <span class="bignumber">25</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Facebook accounts</strong>
 </td>
 <td class="data">
 <span class="bignumber">25</span>
 <small class="text-muted">/max</small>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Bit.ly account</strong>
 </td>
 <td class="data">
 <span class="bignumber">NO</span>
 </td>
 </tr>
 <tr>
 <td class="features">
 <strong>Support</strong>
 </td>
 <td class="data">on-site chat, email, SKYPE</td>
 </tr>
 <tr>
 <td class="features">
 <strong>Color-coded hashtag &amp; tweet grading browser extensions</strong>
 </td>
 <td class="data">Twitter, Buffer, Hootsuite, Tweetdeck, SproutSocial &amp; SocialOomph</td>
 </tr>
 <tr>
 <td class="features">
 <strong>Hashtags analytics</strong>
 </td>
 <td class="data"><i class="fa fa-check"></i></td>
 </tr>
 <tr>
 <td class="features">
 <strong>Mobile Apps included</strong>
 </td>
 <td class="data">Android (iPhone soon)</td>
 </tr>
 <tr>
 <td class="features">Billed yearly:</td>
 <td class="data">99$/mo</td>
 </tr>
 <tr>
 <td class="features">Billed monthly:</td>
 <td class="data">139$/mo</td>
 </tr>
 <tr>
 <td class="features"></td>
 <td class="data">
 <button class="btn btn-primary" type="submit" value="Get Started" role="button">Get Started</button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
</div>

To explain how it all work … The width of pricing tables – all four plans on one line – is about 1028px. Until this value, the “plan” divs will be displayed as inline blocks. When screens width will be lower than this value (1028px), media query will be triggered and “plan-container” divs will be displayed as block elements and their margin will be set to auto. Also, the legend in Pro plan will be displayed. So now we will have two plans per line, both with legend on the beginning.

These two plans, one with legend, span over about 620px. To have some reserves, the next media query (and last) will be set to width of 640px. When this query will be triggered, all the divs with class “plan” will be displayed as block and table elements will get margin of auto. This will stack the plans in pricing tables vertically and center them. Also, we will display the legends in table 2 (Lite plan) and table 4 (Agency plan) by setting the display property to table-cell. Below is complete CSS code with necessary media queries.

CSS code for pricing tables:

.plan-container {
 display: inline;
 width: 620px;
}
.plan {
 margin-left: -5px;
 display: inline-block;
 font: 14px 'Open Sans', sans-serif;
 vertical-align: top;
}
table {
 width: 200px;
 border: 1px solid #ddd;
 border-radius: 4px;
 border-spacing: 0;
 border-collapse: collapse;
}
.table-1 {
 width: 420px;
}
.table-3 {
 position: relative;
 z-index: 2;
 border: 2px solid #cc0090;
}
.features {
 border-right: 1px solid #ddd;
}
th {
 border-bottom: 1px solid #ddd;
}
.lead {
 line-height: 40px;
 background: #eee;
}
tbody tr:nth-child(2n+1) {
 background: #eee;
}
.data {
 text-align: center;
}
.table-2 .features,
.table-3 .features,
.table-4 .features {
 display: none;
}
button {
 padding: 10px 20px;
 margin-top: 15px;
 margin-bottom: 15px;
 background: #cc0090;
 color: #fff;
 border: 0;
 border-radius: 4px;
 cursor: pointer;
 transition: background .3s;
 outline: 0;
}
button:focus, button:hover {
 background: #eb00a6;
}
button:active {
 background: #ad007a;
}
@media screen and (max-width: 1028px) {
 .plan-container {
  display: block;
  margin: auto;
 }
 .table-3 {
  width: 420px;
 }
 .table-3 .features {
  display: table-cell;
 }
}
@media screen and (max-width: 637px) {
 .plan {
  display: block;
 }
 table {
  margin: auto;
  width: 420px;
 }
 .table-2 .features,
 .table-4 .features {
  display: table-cell;
 }
}

Conclusion

No matter how complex the pricing tables can be or how crazy the solution can sound, it still can be possible to achieve it. I hope you liked this tutorial. What do you think about this solution? Have you encountered any other issues or dilemmas with pricing tables in your work?

Just to mention … During writing this post about pricing tables and modifying all the code to work on its own, I was listening to Rammstein. It is metal band from Germany. Do you know this band? What do you like to listen when you code?

If you liked this article, please subscribe so you don't miss any future post.

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

By Alex Devero

I'm Founder/CEO of DEVERO Corporation. Entrepreneur, designer, developer. My mission and MTP is to accelerate the development of humankind through technology.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.