<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-md-offset-1">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Compare Membership Plans</th>
<th>Platinum</th>
<th>Diamond</th>
<th>Gold</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Duration</td>
<td>12 months</td>
<td>6 months</td>
<td>3 months</td>
<td>N/A</td>
</tr>
<tr>
<td colspan="5">Heading text</td>
</tr>
<tr>
<td>type your text............</td></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td colspan="5">Heading text</td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td>type your text............</td>
<td>200</td>
<td>250</td>
<td>300</td>
<td>-</td>
</tr>
<tr>
<td colspan="5">Heading text</td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td colspan="5">type your text............</td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td>type your text............</td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon-remove cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,900);
table
{
background-color: rgba(162, 159, 159, 0.2);
margin-top:30px;
}
table thead
{
-webkit-transition: all .3s ease;
text-shadow: 0px 1px 0px rgb(19, 18, 18);
color: #FFFFFF;
font-size: 14px;
background-color: rgba(230, 0, 0, 0.74);
border-top: 2px solid rgb(185, 16, 16);
box-shadow: 0px 5px 0px rgba(50,50,50, .2) inset;
}
.table-bordered>thead>tr>th {
border: 1px solid #B91010;
border-bottom-width:1px;
border-bottom-color: #E4D4D4;
box-shadow: 0px 2px 6px rgba(19, 17, 17, 0.68);
}
.table-bordered>tbody>tr>td
{
border: 1px solid #B91010;
font-size:13px;
}
.table-bordered {
border: 1px solid #CFCFCF;
}
.table-bordered>tbody>tr:nth-child(2),
.table-bordered>tbody>tr:nth-child(6),
.table-bordered>tbody>tr:nth-child(12),
.table-bordered>tbody>tr:nth-child(14)
{
font-size: 14px;
font-weight:500;
background-color: #FFFFFF;
color: #e60000;
}
.cross
{
color: red;
}
.ok-cross
{
color:green;
}
