Знакомство с таблицами / Испытание: итоговая таблица [23/23]

Всем привет! Не могу понять, что не получается, где ошибка?

HTML код:

`

Итоговая таблица

Город Посещений %
СПб 199 65.12
Москва 69 21.3
Киев 5 8
Посещений за весь период 273
`

CSS код:
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table {
width: 100%;
height: 200px;
border-collapse: collapse;
}
td {
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray;
padding: 10px;
}
.a {
text-align: center;
width: 100px;
}
.b {
text-align: right;
width: 100px;
}
.c {
background-color: lightyellow;
}
.d {
background-color: darkcyan;
}
.e {
background-color: lightblue;
}
.f {
color: white;
}
.g {
border-bottom: 2px solid black;
border-top: 2px solid black;
}

Убирайте ширину и высоту у table, и ширину у отдельных ячеек тоже. Задайте ширину для td 33%.

1 лайк

Спасибо за вариант. При наложении таблицы совпали, но всё равно теплее. Даже до 90% не доходит. И попытки на сегодня кончились. Буду завтра добивать её.

Вообще ничего не понимаю. Вроде бы всё ровно - и результат и наложения и различия всё совпадает. Но системе всё равно что-то не нравится. Так до 90% процентов даже и не доходит

Последний вариант кода и скрин с открытой вкладкой “Различия”, пожалуйста.

`

Испытание: итоговая таблица

Итоговая таблица

Город Посещений %
СПб 199 65.12
Москва 69 21.3
Киев 5 8
Посещений за весь период 273
`

`body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
}
td {
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray;
padding: 10px;
width: 33%;
}
.a {
text-align: center;

}
.b {
text-align: right;

}
.c {
background-color: lightyellow;
}
.d {
background-color: darkcyan;
}
.e {
background-color: lightblue;
}
.f {
color: white;
}
.g {
border-bottom: 2px solid black;
border-top: 2px solid black;
}

Единственное меня смущает то, что чёрные рамки в первой строке таблицы у меня получились немного толще.

1 лайк

Видно же, что черная рамка толще чем надо, разве нет?

Это да, но когда я меняю толщину с 2 пикселей на 1, она становится вообще не чёрной, а серой.

А проверка что говорит по этому поводу?

Удивительное рядом. Только что поменял пиксели с 2 на 1 и проверка с серыми рамками прошла на 93%. Теперь непонятно одно, зачем мы выставляем чёрный цвет рамок, если по факту они серые?

Да-да, я уже вижу. Пока я ищу, что вы там сотворили с этими рамками, исправьте еще одну ошибку. Текст в шапке таблицы должен быть полужирным.

Светло-серую рамку задавайте для tr, а не для td, тогда всё будет в порядке.
И на будущее задавайте названия классов со смыслом.

Ок. Спасибо за советы. А что касаемо классов мне так показалось проще.

“Проще” не всегда означает “лучше”.

1 лайк

Возможно.

у меня 97%

Поделитесь, посмотрим, почему не 100%.