2 задание! 100% совпадение, код компактный, но есть расхождение с подсказками.

Курсы Промежуточные испытания
1

Получил 100%, старался не раздувать код и сделать максимально компактно и рационально.
Для всех ячеек(кроме флагов) я выставил единые параметры отступов, и последним препятствием перед 100% совпадением осталась 4 колонка - в ней требовалось указать иное значение правого отступа. В css подсказке указано, что внутренние отступы кратны 5, но как видно из кода ниже, для 100% подошло значение правого отступа 33px.
Подскажите, что я сделал не так? Или подсказка не совсем верна?

<body>
    <h1>Медальный зачет</h1>
<table>
    <tr>
        <th colspan="4" align="right"><img src="/assets/ifmo/medal-gold.png"></th>
        <th><img src="/assets/ifmo/medal-silver.png"></th>
        <th><img src="/assets/ifmo/medal-bronze.png"></th>
        <th><img src="/assets/ifmo/medal-total.png"></th>
    </tr>
    <tr>
        <td class="grey">1</td>
        <td class="flags"><img src="/assets/ifmo/germany.png"</td>
        <td>Германия</td>
        <td>7</td>
        <td>3</td>
        <td>2</td>
        <td>12</td>
    </tr>
    <tr>
        <td class="grey">2</td>
        <td class="flags"><img src="/assets/ifmo/nederlands.png"></td>
        <td>Нидерланды</td>
        <td>5</td>
        <td>5</td>
        <td>7</td>
        <td>17</td>
    </tr>
    <tr>
        <td class="grey">3</td>
        <td class="flags"><img src="/assets/ifmo/norway.png"></td>
        <td>Норвегия</td>
        <td>5</td>
        <td>3</td>
        <td>6</td>
        <td>14</td>
    </tr>
    <tr>
        <td class="grey">4</td>
        <td class="flags"><img src="/assets/ifmo/switzerland.png"></td>
        <td>Швейцария</td>
        <td>5</td>
        <td>1</td>
        <td>1</td>
        <td>7</td>
    </tr>
    <tr>
        <td class="grey">5</td>
        <td class="flags"><img src="/assets/ifmo/russia.png"></td>
        <td>Россия</td>
        <td>4</td>
        <td>7</td>
        <td>5</td>
        <td>16</td>
    </tr>
</table>
</body>

html, body{
margin:0;
padding:0;
}
body{
width:450px;
font-family:“Arial”, sans-serif;
font-size:16px;
}
h1{
padding:0 20px;
margin:0;
margin-top:20px;
font-size:18px;
font-weight:normal;
}

table {
border-collapse: collapse;
}

td, th {
padding: 10px;
padding-right: 20px;
padding-left: 20px;

}

tr:nth-child(even) {
background: #eeeeee;
}

td:last-child {
text-align: right;
font-weight: bold;

}

td:nth-child(4) {
padding-right: 33px;
}

.grey {
color: #999999;
font-style: italic;
}

.flags {
padding-left: 0px;
padding-right: 0px;

}

2

Ваш код отлично работает без этого фрагмента:
td:nth-child(4) {
padding: 10px;
padding-right: 33px;
padding-left: 20px;
}
если в HTML-коде в шапке таблицы вы объедините не четыре ячейки в одну, а три. Таким образом, в шапке таблицы будет пять ячеек: одна объединенная без содержимого и четыре с медалями.

2 лайка
3

и правда) спасибо за ответ!
но как связан такой эффект с количеством объеденённых ячеек, понять пока не могу(

4

К сожалению, я тоже. Больше часа просидела с открытой консолью в этом задании.

5

заместо этого я сделал через td:first-child, есть ли подвох, в том, что Вы именно через класс задали?

6

Никакого подвоха. Делайте, как хотите.