"membership plan table"
Bootstrap 3.3.0 Snippet by Vaibhav Bhuva

<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; }

Related: See More


Questions / Comments: