<table>
<thead>
<tr>
<th>Hotel</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr class="hotel_a">
<td>Hotel A</td>
<td>
<div class="stars-outer">
<div class="stars-inner"></div>
</div>
</td>
</tr>
<tr class="hotel_b">
<td>Hotel B</td>
<td>
<div class="stars-outer">
<div class="stars-inner"></div>
</div>
</td>
</tr>
<tr class="hotel_c">
<td>Hotel C</td>
<td>
<div class="stars-outer">
<div class="stars-inner"></div>
</div>
</td>
</tr>
<tr class="hotel_d">
<td>Hotel D</td>
<td>
<div class="stars-outer">
<div class="stars-inner"></div>
</div>
</td>
</tr>
<tr class="hotel_e">
<td>Hotel E</td>
<td>
<div class="stars-outer">
<div class="stars-inner"></div>
</div>
</td>
</tr>
</tbody>
</table>
body {
margin-top: 50px;
font-family: sans-serif;
background: #f1f1f1;
}
table {
margin: 0 auto;
text-align: center;
border-collapse: collapse;
border: 1px solid #d4d4d4;
font-size: 20px;
background: #fff;
}
table th,
table tr:nth-child(2n+2) {
background: #e7e7e7;
}
table th,
table td {
padding: 20px 50px;
}
table th {
border-bottom: 1px solid #d4d4d4;
}
.stars-outer {
display: inline-block;
position: relative;
font-family: FontAwesome;
}
.stars-outer::before {
content: "\f006 \f006 \f006 \f006 \f006";
}
.stars-inner {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
width: 0;
}
.stars-inner::before {
content: "\f005 \f005 \f005 \f005 \f005";
color: #f8ce0b;
}
This Pen doesn't use any external JavaScript resources.