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

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

уже 100 раз переделал, все переписал, перепроверил. сравнил с обуч.видео. все не так (((

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

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

Город Посещений %
СПб 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;
}

th,
td {
padding: 10px;
}

td {
border-bottom: 1px solid lightgray;
}

th {
width: 33%;
border-bottom: 1px solid black;
border-top: 1px solid black;
}

table {
border-collapse: collapse;
}

.col-1 {
text-align: left;
}

.col-2 {
text-align: center;
}

.col-3 {
text-align: right;
}

.row-heading {
background-color: darkcyan;
color: white;
}

.cell-highlight {
background-color: lightblue;
}
.row-highlight {
background-color: lightyellow;
}

таблица
таблица655×848 60.2 KB

таблица1
таблица1557×782 87.2 KB

2

Всем привет. Я для себя решил усложнить задание, и не пользоваться классами.
И, о, да, получилось (прежде я прошел тему селекторы).

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: “Arial”, sans-serif;
}

table {
padding-left: 5px;
width: 100%;
border-collapse: collapse;

}

th {
text-align: left;
color: #fff;
background-color: darkcyan;
border-bottom: 1px solid black;
border-top: 1px solid black;
}

th:nth-child(2) {
background-color: lightblue;
text-align: center;
}

th:nth-child(3) {
text-align: right;
}

th, td {
width: 33%;
padding: 10px;
}

td {
border-bottom: 1px solid lightgray;

}

td:nth-child(2) {
text-align: center;
}

td:nth-child(3) {
text-align: right;
}

td[colspan=‘2’] + td {
text-align: right;
}

tbody tr:nth-child(even) {
background-color: lightyellow;
}