Dynamic pricing table/feature matrix with HTML/CSS - html

Question

I am working on building out a pricing table/feature matrix (picture of what I am trying to build below)
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 1

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"> </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> </td>
<td class="price">$19/month</td>
<td class="price">$19/month</td>
<td>$19/month</td>
</tr>
</tbody>
</table>
</div>

Answer 2

EDIT: Okay, this isn't exactly like the image. But I think it will be the most efficient for actually adding data. If you didn't need to add additional data(at least to my knowledge and experience), you could make it look exactly like the image above. The way box shadow works though, I was personally unable to make it function exactly.
Remove the <span> and change the span class to .price. Remove the Display: inline-block; as well. I also added .td-white, which will give the white pricing the look you are wanting(minus the drop shadow). I think this is what you're looking for:
UPDATED*Reference: http://codepen.io/anon/pen/wMZBqG
HTML:
<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>
<tr class="price">
<td class="td-white">20</td>
<td class="td-white">20</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">20</td>
</tr>
<tr class="price-border">
<td class="td-green"></td>
</tr>
</table>
</div>
</section>
CSS:
.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;
}
.price {
text-align:center;
width:230px;
position:relative;
left:380px;
bottom:110px;
font-size:60px;
}
.td-white {
background-color: #FFFFFF !important;
border-right: 1px solid #e3e3e3;
border-top: 1px solid #e3e3e3
}
This should allow you to add new services and have the bottom pricing move dynamically with it.