<table class="olympic-medals">
<tr>
<th>Страна</th>
<th title="Количество золотых медалей"><div> </div></th>
<th title="Количество серебрянных медалей"><div> </div></th>
<th title="Количество бронзовых медалей"><div> </div></th>
<th title="Общее количество медалей"><div> </div></th>
</tr>
<tr>
<td>Россия</td>
<td>2</td>
<td>1</td>
<td>4</td>
<td>7</td>
</tr>
<tr>
<td>Аргентина</td>
<td>2</td>
<td>1</td>
<td>4</td>
<td>7</td>
</tr>
</table>
<style>
.olympic-medals th,
.olympic-medals td {
padding: 2px 10px;
border: 1px solid #999;
box-sizing: border-box;
text-align: left;
}
.olympic-medals th {
padding: 4px;
text-align: center;
font-weight: bold;
color: #585656;
}
.olympic-medals th div {
margin: auto;
}
.olympic-medals th:nth-child(n+2) div {
width: 20px;
height: 20px;
background-image: url('http://max.dev.www.mk.ru/media/img/mk.ru/____i-img/medals.png');
}
.olympic-medals th:nth-child(2) div {
background-size: 60px;
background-position: 0 0;
}
.olympic-medals th:nth-child(3) div {
background-size: 60px;
background-position: 40px 0;
}
.olympic-medals th:nth-child(4) div {
background-size: 60px;
background-position: 20px 0;
}
.olympic-medals th:nth-child(5) div {
background-size: 60px 40px;
background-position: 0 20px;
width: 40px;
}
.olympic-medals th:nth-child(1),
.olympic-medals td:nth-child(1) {
width: 260px;
}
.olympic-medals th:nth-child(n+2),
.olympic-medals td:nth-child(n+2) {
width: 75px;
text-align: center;
}
.olympic-medals td:nth-child(2) {
background-color: rgba(255, 235, 59, 0.6);
}
.olympic-medals td:nth-child(3) {
background-color: rgba(3, 169, 244, 0.3);
}
.olympic-medals td:nth-child(4) {
background-color: rgba(208, 151, 67, 0.5);
}
.olympic-medals td:nth-child(5) {
background-color: rgba(128, 128, 128, 0.2);
}
</style>