почему у моей таблицы другие размеры?

Курсы §5. Знакомство с таблицами
1 
    <table>
    <tr>
      <th class="row-1"> Город</th>
  <th class="row-2">Посещений</th>
  <th class="row-1">%</th>
    </tr>  
    <tr>
      <td >СПб</td>
      <td >199</td>
      <td >65.12</td>
    </tr> 
     <tr class="row-3">
      <td >Москва</td>
      <td >69</td>
      <td >21.3</td>
    </tr> 
    <tr>
      <td >Киев</td>
      <td >5</td>
      <td >8</td>
    </tr> 
     <tr class="row-3">
      <td colspan="2">Посещений за весь период</td>
      <td >273</td>
    </tr> 
    </table>
2 
body {
  width: 350px;
  margin: 0;
  padding: 0 10px;
  font-size: 14px;
  font-family: "Arial", sans-serif;
}
table {
  border-collapse: collapse;
  width: 33%;
}
th {

border-bottom:1px solid black;
border-top:1px solid black;
padding: 10px;
padding-right: 55px;
}
td {
padding: 10px;
border: 1px solid lightgray
padding: 10px;
padding-right: 55px;
}
.row-1 {
color: white;
background-color: darkcyan;
}
.row-2 {
background-color: lightblue;
color: white;
}
.row-3 {
background-color: lightyellow;
}

3 
table {
  border-collapse: collapse;
  width: 33%;   /*  это должно быть не здесь, перенесите в th или td */
}
4

попытался вставить данную строчку вместо padding: 10px;
padding-right: 55px; цвета исчезли из таблицы. Реакция на дальнейшие вмешательства в код частичная