<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 data-label="Name">Carolina Biggleswade</td>
<td data-label="Age">23</td>
<td data-label="Weight">65</td>
<td data-label="Profession">Jockey</td>
</tr>
<tr>
<td data-label="Name">Harry Sparrowhead</td>
<td data-label="Age">34</td>
<td data-label="Weight">89</td>
<td data-label="Profession">Trainer</td>
</tr>
<tr>
<td data-label="Name">Marjorie Doors</td>
<td data-label="Age">32</td>
<td data-label="Weight">76</td>
<td data-label="Profession">Yard Manager</td>
</tr>
<tr>
<td data-label="Name">Earnest Piggington-Smithe</td>
<td data-label="Age">18</td>
<td data-label="Weight">98</td>
<td data-label="Profession">Yard Manager</td>
</tr>
<tr>
<td data-label="Name">Earnest Piggington-Smithe</td>
<td data-label="Age">18</td>
<td data-label="Weight">98</td>
<td data-label="Profession">Yard Manager</td>
</tr>
<tr>
<td data-label="Name">Earnest Piggington-Smithe</td>
<td data-label="Age">18</td>
<td data-label="Weight">98</td>
<td data-label="Profession">Groom</td>
</tr>
<tr>
<td data-label="Name">Earnest Piggington-Smithe</td>
<td data-label="Age">18</td>
<td data-label="Weight">98</td>
<td data-label="Profession">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;
}
@media screen and (max-width: 767px) {
#acrylic thead {
display: none;
}
#acrylic tr {
margin-bottom: 10px;
display: block;
}
#acrylic td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
#acrylic td:last-child {
border-bottom: 0;
}
#acrylic td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
table#acrylic {
width: 100%;
}
}
