user3277733 user3277733 - 3 months ago 7
CSS Question

Dynamic pricing table/feature matrix with HTML/CSS

I am working on building out a pricing table/feature matrix (picture of what I am trying to build below)

enter image description here

I have the base built out, but I am running into trouble with the price rollups at the bottom, specifically for the 'Entrepreneur' and 'Business Pro' columns.

I want to be able to add new rows (new features) onto this and have the bottom prices adjust (move downwards) accordingly. Right now I am using relative positioning, which isn't going to work since I would need to adjust it every time a new feature/row is added.

Codepen Link: http://codepen.io/er40/pen/NxeZpq



.box {
width: 1100px;
margin: 50px auto;
}
/* Services Col */

.services-table {
float: left;
margin-top: 114px;
z-index: 0;
margin-right: 5px;
}
.services-table tr {
height: 40px;
background: #fff;
border-bottom: 1px solid #f4f4f4;
}
.services-table tr:last-child {
border-bottom: none;
}
.services-table th.services {
color: #707478;
font-weight: 100;
min-width: 375px;
background: #fff;
}
/* Entrepreneur and Business Pro Col */

table.price-matrix {
-webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
float: left;
}
table.price-matrix tr {
height: 40px;
background: #fff;
}
/* Headers */

table.price-matrix th.header-white {
color: #707478;
font-weight: 100;
font-size: 30px;
min-width: 230px;
text-align: center;
padding: 15px 0;
background: #fff;
}
table.price-matrix th.header-white:first-child {
border-right: 1px solid #e3e3e3;
}
th.header-white hr,
th.header-green hr {
width: 70%;
border-bottom: 1px solid;
}
/* Rows */

tr:nth-child(even) td {
background: #f7fafb;
}
tr:nth-child(even) td.td-green {
background: #489a5a;
}
tr:nth-child(odd) td.td-green {
background: #54aa66;
}
td.border {
border-right: 1px solid #e3e3e3;
}
/* Enterprise */

.enterprise {
float: left;
-webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
margin-top: -20px;
}
.enterprise tr {
height: 40px;
}
th.header-green {
color: #fff;
font-weight: 100;
font-size: 30px;
min-width: 230px;
text-align: center;
padding: 35px 0 15px;
background: #54aa66;
}
.enterprise tr.price {
height: 100px;
}
.enterprise tr.price-border {
height: 10px;
}
span {
display: inline-block;
text-align: center;
width: 230px;
position: relative;
left: 380px;
bottom: 110px;
font-size: 60px;
}

<section id="pakete">
<div class="box">
<!-- The surrounding box -->

<!-- The front container -->
<div class="front">
<table class="services-table">
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
</table>
<table class="price-matrix" border="0">
<tr>
<th class="header-white">Entrepreneur
<hr />
</th>
<th class="header-white">Business Pro
<hr />
</th>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>

<tr>
<td class="border"></td>
<td class="entypo-cancel"></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
</table>
<table class="enterprise">
<th class="header-green">Enterprise
<hr />
</th>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr class="price">
<td class="td-green"></td>
</tr>
<tr class="price-border">
<td class="td-green"></td>
</tr>
</table>
<span>19</span>
</div>
</section>




Answer

There are many more solutions for this UI, but according to me, this is the quickest/standardised way to achieve this. This layout is also responsive as well.

Note: I have used many :not Selectors to avoid inheritance.

function priceTable() {
  var whiteLeft = $('.white-left').innerWidth(),
    greenWidth = $('.green-width').innerWidth(),
    whiteHeight = $('.price').innerHeight();

  $('.bg-white').css({
    'left': whiteLeft,
    'bottom': whiteHeight
  });

  $('.bg-green').css({
    'width': greenWidth
  });
};

$(document).ready(priceTable);
$(window).on('resize load', priceTable);
body {
  background: #f1f1f1;
  font: 13px/16px sans-serif;
}
.main {
  position: relative;
}
.main .bg-white,
.main .bg-green {
  position: absolute;
  right: 0;
}
.main .bg-white {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  top: 20px;
}
.main .bg-green {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  top: 0;
  bottom: 0;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  z-index: 9;
}
.price-table .min {
  height: 10px;
  padding: 5px;
}
.price-table tr:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.price-table tr:nth-child(2n) td:not(:first-child,
:last-child,
.price) {
  background: rgba(0, 0, 0, 0.02);
}
.price-table tr:nth-child(2n) td:last-child {
  background: #428c52;
}
.price-table tr td {
  padding: 20px;
}
.price-table tr td:not(:first-child) {
  text-align: center;
}
.price-table tr td:last-child {
  background: #489a5a;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <span class="bg-white"></span>
  <span class="bg-green"></span>
  <table class="price-table">
    <thead>
      <tr>
        <td class="min" colspan="3"></td>
        <td class="min"></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="white-left">&nbsp;</td>
        <td>Entrepreneur</td>
        <td>Business Pro</td>
        <td class="green-width">Enterprise</td>
      </tr>
      <tr>
        <td>Service 1</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 2</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 3</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 4</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="price">$19/month</td>
        <td class="price">$19/month</td>
        <td>$19/month</td>
      </tr>
    </tbody>
  </table>
</div>

Comments