"Clean & Simple Table"
Bootstrap 3.3.0 Snippet by js.krishna

<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="wrapper"> <table id="acrylic"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Weight (kg)</th> <th>Profession</th> </tr> </thead> <tbody> <tr> <td>Carolina Biggleswade</td> <td>23</td> <td>65</td> <td>Jockey</td> </tr> <tr> <td>Harry Sparrowhead</td> <td>34</td> <td>89</td> <td>Trainer</td> </tr> <tr> <td>Marjorie Doors</td> <td>32</td> <td>76</td> <td>Yard Manager</td> </tr> <tr> <td>Earnest Piggington-Smithe</td> <td>18</td> <td>98</td> <td>Groom</td> </tr> <tr> <td>Earnest Piggington-Smithe</td> <td>18</td> <td>98</td> <td>Groom</td> </tr> <tr> <td>Earnest Piggington-Smithe</td> <td>18</td> <td>98</td> <td>Groom</td> </tr> <tr> <td>Earnest Piggington-Smithe</td> <td>18</td> <td>98</td> <td>Groom</td> </tr> </tbody> </table> </div>
table#acrylic { border-collapse: separate; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: 50px auto; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); cursor: pointer; } #acrylic thead { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #acrylic thead th { font-family: 'Roboto'; font-size: 16px; font-weight: 400; color: #fff; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); text-align: left; padding: 20px; background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646f7f), color-stop(100%, #4a5564)); background-image: -moz-linear-gradient(#646f7f, #4a5564); background-image: -webkit-linear-gradient(#646f7f, #4a5564); background-image: linear-gradient(#646f7f, #4a5564); border-top: 1px solid #858d99; } #acrylic thead th:first-child { -moz-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; } #acrylic thead th:last-child { -moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } #acrylic tbody tr td { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #5f6062; font-size: 13px; padding: 20px 20px 20px 20px; border-bottom: 1px solid #e0e0e0; } #acrylic tbody tr:nth-child(2n) { background: #f0f3f5; } #acrylic tbody tr:last-child td { border-bottom: none; } #acrylic tbody tr:last-child td:first-child { -moz-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } #acrylic tbody tr:last-child td:last-child { -moz-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } #acrylic tbody:hover > tr td { filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } #acrylic tbody:hover > tr:hover td { text-shadow: none; color: #2d2d2d; filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; transition: 0.2s all; }

Related: See More


Questions / Comments: