You're here: Home » CSS » CSS Features Table

CSS Features Table

On Nov 4, 2011 under CSS

The Features table is built with pure CSS3 code. I have not used any jquery or javascript coding. Also, I have not used any images for better performance. You can add easily add new items to the list in the html code. When you add new items alternating background colors are automatically changed.

View Demo

Features Table

CSS

li,
p {
    line-height: 0px;
    margin-top: 0px;
}
.bigfeatures-table {
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif !important;
    font-size: 12px;
}
.four-schemes .heading { width: 150px }
.features-table-container {
    width: 600px;
    overflow: hidden;
    border-left: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
}
#features-table {
    color: #fff;
    position: relative;
    border-collapse: collapse;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #eeeeee 100%);
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#eeeeee 100%);
    background: linear-gradient(top, #fbfbfb 0%,#eeeeee 100%);
}
	#features-table td { vertical-align: top }
	#features-table th { overflow: hidden }
	#features-table h2 {
	    color: #fff;
	    font-size: 17px;
	    display: block;
	    text-align: center;
	    margin: 0;
	    padding: 7px 0;
	    border-bottom: 1px solid rgba(255,255,255,0.4);
	    border-bottom: 1px solid rgba(255,255,255,0.4);
	    text-shadow: 0 1px rgba(0,0,0,0.3);
	    position: relative;
	}
	#features-table .scheme:last-child h2 { border-bottom: 1px solid rgba(255,255,255,0.4) }
	#features-table .scheme:first-child h2,
	#features-table .scheme:first-child { border-radius: 5px 0 0 0 }
	#features-table .scheme:last-child h2,
	#features-table .scheme:last-child { border-radius: 0 5px 0 0 }
	#features-table tr th,
	#features-table tr td { position: relative }
	#features-table tr { position: relative }
/* Scheme right side borders - #eee is for IE8 */
.heading:after {
    border-right: 1px solid rgba(255,255,255,0.5);
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    height: 100%;
    z-index: 10;
}
.scheme ul:after {
    border-right: 1px solid #eee;
    border-right: 1px solid rgba(255,255,255,0.5);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 10;
}
.signup-scheme:after {
    border-right: 1px solid rgba(0,0,0,0.075);
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    height: 100%;
    z-index: 10;
}
.heading:before {
    border-right: 1px solid rgba(0,0,0,0.075);
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    height: 100%;
    z-index: 10;
}
.scheme ul:before {
    border-right: 1px solid rgba(0,0,0,0.075);
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    height: 100%;
    z-index: 10;
}
.signup-scheme:before {
    border-right: 1px solid #eee;
    border-right: 1px solid rgba(255,255,255,0.5);
    content: "";
    position: absolute;
    top: 0px;
    left: 1px;
    height: 100%;
    z-index: 10;
}
.scheme:first-child .heading:after,
.scheme:first-child ul:after,
.scheme td:first-child .signup-scheme:after { border-right: 0 }
.scheme:first-child .heading:before,
.scheme:first-child ul:before,
.scheme td:first-child .signup-scheme:before { border-right: 0 }
.scheme ul {
    padding: 0px 0 5px 0;
    margin: 0px 0 0px 0;
    display: block;
    position: relative;
    z-index: 4;
}
	.scheme ul li {
	    color: #333;
	    list-style-type: none;
	    padding-left: 20px;
	    text-shadow: 0 1px 0 #fff;
	    margin-bottom: 0px;
	    padding: 10px 28px 10px 28px;
	    line-height: 25px;
	}
	.scheme ul li:nth-child(2n) {
	    background: rgba(0,0,0,0.04);
	    background: -moz-linear-gradient(top, rgba(0,0,0,0.04) 0%, rgba(140,140,140,0.06) 100%);
	    background: -webkit-linear-gradient(top, rgba(0,0,0,0.04) 0%,rgba(140,140,140,0.06) 100%);
	    background: linear-gradient(top, rgba(0,0,0,0.04) 0%,rgba(140,140,140,0.06) 100%);
	}
	.scheme ul li:last-child { border-bottom: 0px }
.scheme .heading {
    font-family: helvetica;
    position: relative;
    height: 140px;
}
	.scheme .heading strong {
	    color: #fff;
	    font-weight: normal;
	    display: block;
	    text-align: center;
	    text-shadow: 0 1px rgba(0,0,0,0.2);
	    display: block;
	    letter-spacing: -1px;
	    position: relative;
	    padding: 20px 0px 20px 0px;
	    z-index: 9;
	}
		.scheme .heading strong em {
		    font-size: 65px;
		    line-height: 64px;
		    font-style: normal;
		}
	.scheme .heading sub {
	    font-size: 24px;
	    position: relative;
	    top: -31px;
	    letter-spacing: 0px;
	}
	.scheme .heading small {
	    font-size: 12px;
	    opacity: 0.7;
	    letter-spacing: 0px;
	}
.scheme .l {
    font-size: 13px;
    display: block;
    text-align: center;
    margin: -32px 0 20px;
    position: relative;
    z-index: 5;
    text-shadow: 0 1px rgba(0,0,0,0.3);
}
.scheme .signup-scheme {
    padding: 20px 0;
    display: block;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.04);
    border-bottom: 1px solid #eee;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    line-height: 32px;
    vertical-align: middle;
    color: #000;
    position: relative;
    line-height: 13px;
    background: rgba(0,0,0,0.04);
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.01) 100%);
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.05) 0%,rgba(160,160,160,0.05) 100%);
    background: linear-gradient(bottom, rgba(0,0,0,0.05) 0%,rgba(255,255,255,0.01) 100%);
}
.scheme .signup-scheme:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    border-top: 1px solid rgba(255,255,255,0.5);
    z-index: 9;
}
.scheme .signup-scheme p {
    font-weight: bold;
    line-height: 31px;
}
.scheme .signup-scheme a.signup {
    position: relative;
    z-index: 6;
}
.scheme .top {
    border-top: none;
    padding: 20px 0;
}
/* ie */
.scheme.basic .heading { background: #89bf47 }
.scheme.professional .heading { background: #30ab86 }
.scheme.business .heading { background: #58c6d3 }
.scheme.unlimited .heading { background: #2a2a2a }
.scheme .heading { background: #2a2a2a }
#features-table .scheme .heading {
    font-family: helvetica;
    position: relative;
    /* transparent in everything but IE */
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}
.scheme.basic h2 { background: #ac1b16 }
.scheme.basic .heading { position: relative }
	.scheme.basic .heading strong {
	    position: relative;
	    background: #c5564f;
	    overflow: hidden;
	}
.scheme.professional h2 { background: #a28005 }
.scheme.professional .heading strong { background: #b09436 }
.scheme.business h2 { background: #2ba1c6 }
.scheme.business .heading strong { background: #48a8cb }
.scheme.business .heading sub { position: relative }
.scheme.business .heading sub:before {
    background: red;
    position: absolute;
    top: 0;
    width: 20px;
    height: 30px;
    display: block;
    z-index: 999;
}
.scheme.unlimited h2 { background: #86c429 }
.scheme.unlimited .heading strong { background: #9dcf50 }
/* Default Color for Schemes */
.scheme h2 {
    background: #3a3a3a;
    background: -moz-linear-gradient(top, #3a3a3a 0%, #1b1b1b 100%);
    background: -webkit-linear-gradient(top, #3a3a3a 0%,#1b1b1b 100%);
    background: linear-gradient(top, #3a3a3a 0%,#1b1b1b 100%);
}
.scheme .heading strong {
    background: #2a2a2a;
    background: -moz-linear-gradient(top, #393939 0%, #2a2a2a 100%);
    background: -webkit-linear-gradient(top, #393939 0%,#2a2a2a 100%);
    background: linear-gradient(top, #393939 0%,#2a2a2a 100%);
}
/* Signup Buttons */
.signup,
a.signup {
    font-family: myriad-pro, Helvetica, Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    text-align: center;
    cursor: pointer;
    border: 1px solid #b5b5b5;
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6 repeat-x;
    padding: 3px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0px 1px 1px #385b01;
    position: relative;
    box-shadow: 0px 0px 3px rgba(0, 0, 1, 0.3);
    text-decoration: none;
    line-height: 20px;
    display: inline-block;
    background: #484848;
    background: -moz-linear-gradient(top, #656565 0%, #1c1c1c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #656565), color-stop(100%, #1c1c1c));
    background: -webkit-linear-gradient(top, #656565 0%, #1c1c1c 100%);
    background: -o-linear-gradient(top, #656565 0%, #1c1c1c 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#656565', endColorstr='#1c1c1c')";
    /* IE8+ */
}
.signup:hover,
a.signup:hover {
    border: 1px solid #b5b5b5;
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6 repeat-x;
    text-shadow: 0px 1px 1px #385b01;
    box-shadow: 0px 0px 3px rgba(0, 0, 1, 0.5);
    background: #1c1c1c;
    /* IE8+ */
}

HTML

<div class="bigfeatures-table">
	<div class="col four-schemes features-table-container" style="overflow:hidden">
		<table id="features-table" class="">
		<colgroup id="basic-col"></colgroup>
		<colgroup id="professional-col"></colgroup>
		<colgroup id="business-col"></colgroup>
		<colgroup id="unlimited-col"></colgroup>
		<tr>
			<th class="basic scheme ">
				<div class="heading">
					<h2>Basic</h2>
					<strong>
					<sub>$</sub><em>25</em><small>/mo</small>
					</strong>
				</div>
				<!-- .heading -->
			</th>
			<th class="professional scheme ">
				<div class="heading">
					<h2>Professional</h2>
					<strong>
					<sub>$</sub><em>55</em><small>/mo</small>
					</strong>
				</div>
				<!-- .heading -->
			</th>
			<th class="business scheme ">
				<div class="heading">
					<h2>Business</h2>
					<strong>
					<sub>$</sub><em>99</em><small>/mo</small>
					</strong>
				</div>
				<!-- .heading -->
			</th>
			<th class="unlimited scheme ">
				<div class="heading">
					<h2>Unlimited</h2>
					<strong>
					<sub>$</sub><em>185</em><small>/mo</small>
					</strong>
				</div>
				<!-- .heading -->
			</th>
		</tr>
		<tr class="scheme">
			<td>
				<div class="signup-scheme top">
					<a href="#" class="signup" data-col="basic">Get Free trial</a>
				</div>
				<!-- .signup-scheme -->
			</td>
			<td>
				<div class="signup-scheme top">
					<a href="#" class="signup" data-col="professional">Get Free trial</a>
				</div>
				<!-- .signup-scheme -->
			</td>
			<td>
				<div class="signup-scheme top">
					<a href="#" class="signup" data-col="business">Get Free trial</a>
				</div>
				<!-- .signup-scheme -->
			</td>
			<td>
				<div class="signup-scheme top">
					<a href="#" class="signup" data-col="unlimited">Get Free trial</a>
				</div>
				<!-- .signup-scheme -->
			</td>
		</tr>
		<tr>
			<td class="basic scheme">
				<ul>
					<li><strong>Free</strong> setup</li>
					<li><strong>100 GB</strong> bandwidth</li>
					<li><strong>5 GB</strong> Storage</li>
					<li><strong>1</strong> Free Domain</li>
					<li><strong>$50 free</strong> AdWords credit</li>
					<li><strong>1</strong> Dedicated IP</li>
					<li><strong>Plesk / VZ</strong> Control Panel</li>
				</ul>
			</td>
			<td class="professional scheme">
				<ul>
					<li><strong>Free</strong> setup</li>
					<li><strong>150 GB</strong> bandwidth</li>
					<li><strong>15 GB</strong> Storage</li>
					<li><strong>1</strong> Free Domain</li>
					<li><strong>$100 free</strong> AdWords credit</li>
					<li><strong>1</strong> Dedicated IP</li>
					<li><strong>Plesk / VZ</strong> Control Panel</li>
				</ul>
			</td>
			<td class="business scheme">
				<ul>
					<li><strong>Free</strong> setup</li>
					<li><strong>400 GB</strong> bandwidth</li>
					<li><strong>30 GB</strong> Storage</li>
					<li><strong>3</strong> Free Domain</li>
					<li><strong>$150 free</strong> AdWords credit</li>
					<li><strong>2</strong> Dedicated IP</li>
					<li><strong>Plesk / cPanel</strong> Control Panel</li>
				</ul>
			</td>
			<td class="unlimited scheme">
				<ul>
					<li><strong>Free</strong> setup</li>
					<li><strong>Unlimited</strong> bandwidth</li>
					<li><strong>100 GB</strong> Storage</li>
					<li><strong>5</strong> Free Domain</li>
					<li><strong>$200 free</strong> AdWords credit</li>
					<li><strong>2</strong> Dedicated IP</li>
					<li><strong>Plesk / cPanel</strong> Control Panel</li>
				</ul>
			</td>
		</tr>
		<tr class="scheme">
			<td>
				<div class="signup-scheme">
					<a href="#" class="signup" data-col="basic">Start free trial</a>
				</div>
				<!-- .signup-scheme -->
			</td>
			<td>
				<div class="signup-scheme">
					<a href="#" class="signup" data-col="professional">Start free trial</a>
				</div>
				<!-- .signup-scheme -->
			</td>
			<td>
				<div class="signup-scheme">
					<a href="#" class="signup" data-col="business">Start free trial</a>
				</div>
				<!-- .signup-scheme -->
			</td>
			<td>
				<div class="signup-scheme">
					<a href="#" class="signup" data-col="unlimited">Start free trial</a>
				</div>
				<!-- .signup-scheme -->
			</td>
		</tr>
		</table>
		<!-- #features-table -->
	</div>
	<!-- .col -->
</div>

View Demo

CSS Gradient Menu Buttons

CSS Loading Animation Circle Style

CSS Loading Animation Rectangle Style

CSS Semi Transparent Border

CSS Stack of Paper Effect

Comments on this entry (2 comments)

Did you like this post? You can share your opinion with us! Simply click here.

Ian Mason says:

November 5, 2011 at 15:17

It is really a nice and helpful piece of info for designers. I am glad that you shared this useful information with us. Please stay us informed like this. Thank you for sharing.

Reply
- Mukundan Srinivasan says:
  
  November 5, 2011 at 16:34
  
  THANKS IAN
  
  Reply

Webfroze

CSS Features Table

Features Table

CSS

HTML

Related Posts

Comments on this entry (2 comments)

Leave a Reply

Recent Posts

Popular Posts

Webfroze

CSS Features Table

Features Table

CSS

HTML

Subscribe to Webfroze

Related Posts

Comments on this entry (2 comments)

Leave a Reply

Subscribe to Blog

Recent Posts

Popular Posts