<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="container"> <div class="row"> <div class="table-responsive"> <table id="main-table" class="table exotic-table"> <thead> <tr class="text-center"> <th>Lorem</th> <th>Lipsum</th> <th>Dorem</th> <th>Lorem</th> <th>Lipsum</th> <th>Dorem</th> </tr> </thead> <tbody class="text-center"> <tr> <td><span class="glyphicon glyphicon-check purple"></span></td> <td>should</td> <td>come</td> <td><span class="glyphicon glyphicon-ok green"></span></td> <td>to</td> <td>fill</td> </tr> <tr> <td>Something</td> <td>should</td> <td>come</td> <td>here</td> <td><span class="glyphicon glyphicon-refresh paleyellow"></span></td> <td>fill</td> </tr> <tr> <td>Something</td> <td><span class="glyphicon glyphicon-hdd turquoise"></span></td> <td>come</td> <td>here</td> <td><a href="#" title="Some Title" data-toggle="popover" data-trigger="hover" data-content="<span class='glyphicon glyphicon-refresh paleyellow'></span> Can put icons or any other HTML content" class="td-price">hover me</a></td> <td>fill</td> </tr> <tr> <td>Something</td> <td>should</td> <td>come</td> <td><span class="glyphicon glyphicon-ok green"></span></td> <td>to</td> <td><span class="glyphicon glyphicon-hdd turquoise"></span></td> </tr> <tr> <td>Something</td> <td>should</td> <td><span class="glyphicon glyphicon-remove red"></span></td> <td>here</td> <td>to</td> <td>fill</td> </tr> </tbody> </table> </div> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover({title: "Payment Modes",html: true, placement: "left"}); }); </script>

body{ background:#fff; font-family: sans-serif; color:#ccc; padding:15px } .table>thead>tr>th{border-bottom: none;} .exotic-table{ color:#fff; background: #191919; text-align: center; border: none; } .exotic-table thead tr{ border: 2px #333 outset; text-align: center; } .exotic-table thead>tr>th{ text-align: center; } .exotic-table tbody{ border:2px outset #333; border-top:none } .exotic-table tbody tr{ background: #222; } .exotic-table tbody tr:hover{ box-shadow:0 0 20px #000; background:#1a1a1a; } .exotic-table tbody tr td{ border-bottom:2px outset #333; } .table-responsive{ border:none; } .popover { color:#000 } a.td-price{ color:#fff; border-bottom:1px dotted #ccc } .green{color:#47e900} .red{color:#f00808} .paleyellow{color:#f8d97c} .purple{color:#b461ff} .turquoise{color:#52edff}