maxmoriss
7/27/2016 - 12:26 PM

medals-page.html

<table class="olympic-medals">
    <tr>
        <th>Страна</th>
        <th title="Количество золотых медалей"><div>&nbsp;</div></th>
        <th title="Количество серебрянных медалей"><div>&nbsp;</div></th>
        <th title="Количество бронзовых медалей"><div>&nbsp;</div></th>
        <th title="Общее количество медалей"><div>&nbsp;</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>