Добавляем 10 строчек кода. Блочные элементы div class=“column” превращаем из блочных в блочно-строчные (урок 18) display: inline-block;, производим вертикальное выравнивание со значением -top-, правый внешний отступ (margin-right) задаем 10px, ну и ширину блока 76px (100 - 22 border - 102 padding).
Блочный элемент div class=“table” превращаем в таблицу display: table; (урок 19), классу
.col-3 задаем display: none; чтобы не мешался, элементы div class=“row” надо превратить в строки созданной ранее таблицы что мы делаем с помощью display: table-row; появилась таблица с двойным border внутри. От этого избавляемся с помощью ранее изученного свойства border-collapse со значением collapse. Ну и высчитываем ширину ячейки. Для этого классу cell задаем значение width: одна клетка это 20px, всего их 6 - это 120px, border это по 2px, внутренние отступы padding горизонтальный по 10px Итого: 120-4-20=96px. Получается:
/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
margin-right: 10px;
width: 76px;
}
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
width: 96px;
}
.table {
display: table;
border-collapse: collapse;
}
.col-3 {
display: none;
}
.row {
display: table-row;
}
Трудность у меня была в следующем: вместо свойства border-collapse писал просто border: collapse; Забывчивость, если не повторять. Иногда сбивает слепой способ печати при переходе на английскую клавиатуру. Всем успехов.