Испытание: таблица посложнее [17/23]

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

Моя версия вышла идентичной необходимой, однако при наложении есть сдвиг буквально в 0.5 пикселей. Прошу объяснить мне ибо весь вечер убил на поиск ошибки.

1.jpg337×540 43.5 KB 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Таблица посложнее</title>
    </head>
    <body>
        <table border="1">
        
        <caption>Посещения по городам</caption>
        <tr>
            <th>Город</th>       
            <th>Посещения</th>  
            <th>Страниц</th>     
            <th>Время</th>
        </tr>
        <tr>
        <td>СПб</td>         
        <td>199</td>         
        <td>18,02</td>       
        <td>00:13:45</td>
        </tr>
        <tr>
        <td>Москва</td>      
        <td>69</td>         
        <td rowspan="2">нет данных</td>  
        <td>00:00:44</td>
        </tr>
        <tr>
        <td>Киев</td>        
        <td>5</td>       
                     
        <td>00:18:07</td>
        </tr>
        <tr>
        <td colspan="3">Всего посещений</td>
      
        <td>273</td>
        </tr>
        
        </table>
    </body>
</html>

body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial, sans-serif;
}
caption { caption-side: bottom; }
th {
    padding: 10px;
    border-bottom: 2px solid black;
    
    }
td { padding: 10px;
border-color: lightgray;

}
table {border-collapse: collapse;
        border-color: lightgray;
        border-bottom: 1px solid lightgray;
       border-right: 0px solid #fff;
    border-left: 0px solid #fff;
    border-top: 0px solid #fff;
    }
2

Прописать рамку в HTML-коде, а потом в CSS пытаться обнулить ее с трех сторон - это достаточно гениально. Но только вы сами создали себе проблему.
Элементам оформления нечего делать в разметке. Уберите. Рамку добавьте для td нужной ширины, цвета и стиля.

3 лайка
3

Я вас правильно понял? Убрал атрибут border=“1” из html и изменил сss
Вот что вышло, это ближе к реальности?

caption { caption-side: bottom; }
th {
    padding: 10px;
    border-bottom: 2px solid black;
    
    }
td {
    padding: 10px;
    border-color: lightgray;
    border-right: 1px solid lightgray;
    border-left:1px solid lightgray;
    border-top: 1px solid lightgray;

}
table {border-collapse: collapse;
       border-bottom: 1px solid lightgray;
4

Определенно, ближе)
Еще бы объединить четыре свойства рамки в одно, а у table убрать совсем и будет хорошо.

5

Спасибо за оперативную реакцию, теперь самому приятно на код смотреть.
Оказалось что я изобретал велосипед

caption { caption-side: bottom; }
th {
    padding: 10px;
    border-bottom: 2px solid black;
     }
td {
    padding: 10px;
    border: 1px solid lightgray;
    }
table {border-collapse: collapse;}
6

:blush:

7

В теории ошибка:
3. Размеры отступов кратны 5.
По факту там 10.

8

Испытание: простая, но аккуратная таблица [9/23]