Последнее испытание [23/23].Подробное описание. Минимум расчетов. 100%. Прокомментируйте, пожалуйста.

Курсы §10. Блочная модель документа
1 
.column {
        margin-bottom: 10px;
        padding: 10px;
        background: rgba(0, 255, 255, 0.2);
        border: 2px solid white;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        width: 100px;
        margin-right: 10px;
    }

.table {
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding: 5px 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    box-sizing: border-box;
    width: 118px;
}

.col-3 {
    display: none
}

Первое, что мы видим, это обычные <div> контейнеры, которые нужно оформить и сделать, как показано в образце.
В первой части задания нам нужно блочные элементы сделать строчно-блочными, чего мы и добьемся, добавив display: inline-block; элементам с классом column.
Блоки встают в одну линию и далее мы просто выравниваем их расположение, используя vertical-align: top; и задаем ширину в 100px, учитывая все паддинги и бордеры box-sizing: border-box;. Последним штрихом будет добавление внешнего отступа справа margin-right: 10px;

Во второй части задания все еще проще чем кажется на первый взгляд (сначала мне так не показалось :smile:). Нам нужно просто добавить классам table, row, cell. CSS-свойства display: table, display: table-row, display: table-cell соответственно и убрать отображение 3-й колонки, чтобы таблица примерно стала похожа на ту, что показана в образце:

.col-3 {
    display: none
}

Осталось убрать двойную толщину у линий в таблице и “подогнать” все по размерам.
Двойная толщина бордера убирается с помощью border-collapse: collapse, который мню был размещен в .table.

Ну и последнее - “подгоняем” таблицу по размерам.

В образце мы можем посчитать, что ширина блока 6 клеток, а это 120px (1 клетка = 20px)
Screenshot_4

Но 120px со свойством box-sizing: border-box; повели себя странно и (как мне показалось) не учли размер бордера в 2px.
Позже я нашла информацию, что все дело в сочетании свойства border-collapse и box-sizing.
Один добрый форумчанин написал:

Note that in this model, the width of the table includes half the table border.

Как я поняла имелось ввиду, что наш центральный бордер имел в сумме ширину 4px. После коллапса он стал 2px, но для расчета значений box-sizing: border-box использовалось значение половины 4px. (Кто уже встречался с подобной ситуацией и владеет большей информацией то поправьте меня, пожалуйста, если я сделала неправильный вывод).

Учитываем эти 2px и получаем:

box-sizing: border-box;
width: 118px;

в описании класса .cell

Вот, собственно и все.:candy:

5 лайков
2

а я вот так сделал) тоже норм, вроде как)))
.table{
display: table;
box-sizing: border-box;
width: 238px;
border-collapse: collapse;
}

.row{
display: table-row;
}

.col-1{
width: 50%;
}

1 лайк
3

А можно просто колонкам ширину задать)

/* Cтили, которые можно изменять */
.column {
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 100px;
    padding: 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display: inline-block;
    vertical-align: top;  
}

.table {
    border-collapse: collapse;
}

.cell {
    padding: 5px 10px;
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
    display: table-cell;
}

.row {
    display: table-row;
}

.col-1, .col-2 {
    width: 96px;
}

.col-3 {
    display: none;
}
4

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
width: 96px;
}

.col-1, .col-2 { width: 96px; }

…задаём ширину всем колонкам…