вопрос по заданию - курс по таблицам

Курсы §5. Знакомство с таблицами
1

Вопрос по прохождению итогового испытания курса: «Знакомство с таблицами»

Подскажите плз что у меня в коде не так.
Я использовал все изученные выше правила и теги.

<!-------------------------HTML-------------------------->

<!DOCTYPE html>
<html>
<head>
<title>Испытание: итоговая таблица</title>
<meta charset="utf-8">
</head>
<body>
<h1>Итоговая таблица</h1>
<table>
<tr class="main"><th>Город</th><th>Посещений</th><th class="pr">%</th></tr>
<tr class="spb"><td>СПБ</td><td class="a">199</td><td class="b">65.12</td></tr>
<tr class="msk"><td>Москва</td><td class="a">69</td><td class="b">21.3</td></tr>
<tr class="kiev"><td>Киев</td><td class="a">5</td><td class="b">8</td></tr>
<tr class="end"><td colspan="2">Посещений за весь период</td><td class="b">273</td></tr>
</table>
</body>
</html>

<!-------------------------CSS-------------------------->

body{
width:260px;
margin:0;
padding:0 10px;
font-size:11px;
font-family:"Arial";
}
table{
border-collapse: collapse;
}
tr{
line-height:10px;
}
th,td {
padding:11px;
width: 33%;
}
.main{
background-color:#618AD2;
color:white;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
}
.spb{
background-color:white;
border-bottom:1px solid #CCCCCC;
}
.msk{
background-color:#F5F5F5;
border-bottom:1px solid #CCCCCC;
}
.kiev{
background-color:white;
border-bottom:1px solid #CCCCCC;
}
.end{
background-color:#F5F5F5;
border-bottom:1px solid #CCCCCC;
}
.a{
text-align:center;
}
.b{
text-align:right;
}
.pr{
text-align:right;
}

Не нужно кидать готовый код, в комментариях к заданию их с сотню.
Я хочу разобраться в своём и понять ошибки.
Благодарю за понимание.

2

Почему бы вам не поменять padding на 10px ? Или вы не любите четные числа ? :blush:

3

менял, бесполезняк =(

4

Не уверен, что правильно, но довёл этот код до 100% тремя моментами:

  1. Вместо padding: 11px написал padding: 10px у th, td.
    Всё-таки отступы кратны пяти.
  2. Полностью убрал участок tr {line-height:10px;}.
    Если честно, я не понял, зачем это здесь нужно, когда решал сам, не использовал подобного. Мне кажется, задавать межстрочный интервал в этом задании — вообще лишнее.
  3. Добавил в конец css ещё правило (без него 98%): .main th:nth-child(2) {text-align: center;}
    Это для того, чтобы выровнять слово “Посещений”.
1 лайк
5

@Leo сказал верно, поэтому мне остается добавить лишь: Не используйте названия классов “однобуквенные”. В будущем Вы поймете, что это предоставит кучу проблем, лучше сразу обдумывать правильные названия.

А еще лучше - старайтесь использовать псевдоклассы. Это куда удобней, чем добавлять в DOM классы элементам.