97% в чем ошибка?

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr class="title">
                <td class="blue1"> Город</td>
                <td class="light"> Посещений </td>
                <td class="blue2"> % </td>
                </tr>
                <tr >
                    <td class="city">СПб</td>
                    <td class="visit"> 199 </td>
                    <td class="per"> 65.12 </td>
                    </tr>
                    <tr class= "yellow">
                        <td class="city"> Москва </td>
                        <td class="visit"> 69 </td>
                        <td class="per"> 21.3 </td>
                        </tr>
                        <tr>
                            <td class="city">  Киев </td>
                            <td class="visit"> 5 </td>
                            <td class="per"> 8 </td>
                            </tr>
<tr class="yellow">
    <td class ="lala" colspan="2"> Посещений за весь период </td>
    <td class="per"> 273 </td>
    </tr>
    </table>
            </body>
</html>

По наложению - немного сдвинуты слова в верхней строке, а я никак не пойму - почему?

css-код тоже нужен.

body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial, sans-serif;
}
table {
    border-collapse: collapse;
    padding: 10px;
    width: 100%;
  }
tr.title {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}
td.blue1 {
    background-color: darkcyan;
    color: white;
    text-align: left;
    width: 33%;
    padding: 10px;
}
td.blue2 {
    background-color: darkcyan;
    color: white;
    text-align: right;
    width: 33%;
    padding: 10px;
}
td.light {
    background-color: lightblue;
    color: white;
    text-align: center;
    width: 33%;
    padding: 10px;
}
tr {
    border-bottom: 1px solid lightgray;
    padding: 10px;
}
td.city {
    text-align: left;
    padding: 10px;
}
td.visit {
    text-align: center;
}
td.per {
    text-align: right;
    padding: 10px;
}
td.lala {
    padding: 10px;
    }

tr.yellow {
    background-color: lightyellow;
    border-bottom: 1px solid lightgray;
    padding: 10px;
    }

Текст в первой строке должен быть жирным.
Пересмотрите свой css-код, вы много раз повторяетесь.
Попробуйте сгруппировать общие свойства для td в одном правиле.

td {
   ...
}
1 лайк