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

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

Не могу исправить ошибку, кусок нижней строки упорно вылезает за пределы таблицы. Если стереть ячейку с “273”, таблица становится на место.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
<table>
        <tr class="row-1">
        <th class="column-1" style="">Город</th>    
        <th class="column-2" style="background-color: lightblue;">Посещений</th>    
        <th class="column-3" style="">%</th>
        </tr class="row-1">
        
        <tr>
        <td class="column-1">СПб</td>   
        <td class="column-2">199</td>    
        <td class="column-3">65.12</td>
        </tr>
        
        <tr class="row-2">
        <td class="column-1">Москва</td>   
        <td class="column-2">69</td>     
        <td class="column-3">21.3</td>
        </tr class="row-2">
        
        <tr>
        <td class="column-1">Киев</td>   
        <td class="column-2">5</td>   
        <td class="column-3">8</td>
        </tr>
        
        <tr class="row-2">
        <td class="column-1" colspan ="2">Посещений за весь период</td>
        <td class="column-3">273<td>
        </tr class="row-2">
</table>
    </body>
</html>

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

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

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

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

.row-1 {
background-color: darkcyan;
color: white;
border-bottom: 1px solid black;
border-top: 1px solid black;
}

.row-2 {
background-color: lightyellow;
}

table {
border-collapse: collapse;
}

tr {

}

th{
padding: 10px;
}

td {
padding: 10px;
width:33%;
border-bottom: 1px solid lightgray;
}

2

Не влезает поэтому:

А так не пишите больше:

Класс пишется только в открывающем теге, закрывающий всегда пустой.

3

Спасибо!!