Created
July 27, 2016 12:26
-
-
Save maxmoriss/69fdcc6f372dbfd275199d39be94be63 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment