Последнее испытание [23/23] - 100%. Мое решение на 100% и подробная инструкция.


#1

С этим заданием мне пришлось повозиться, даже сейчас есть моменты, которые я пока не могу объяснить словами :grinning: наверное потому, что поленился изучить подробно HTML-код.

С первыми двумя блоками у меня не возникло проблем. Мы видим 2 контейнера :package: div с классом collum. С помощью сетки мы видим, что их ширина фиксирована и они занимают 100px. Первым делом задаем эту ширину, затем нужно их расположить в одной плоскости, для этого меняем задаем им режим отображения display: inline-block, выравниваем по верхнему краю vertical-align: top. Для того чтобы на размер блока не влияли наши внутренние отступы воспользуемся уже знакомым box-sizing: border-box, ну и в конце задаем правый внешний отступ в 10px.

.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 100px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
margin-right: 10px;
}

Идем дальше. Мы видим div с классом table - это наша таблица. Первым делом стоит разобраться с режимом отображения, в этом нам поможет display: table-cell; (честно сказать подбирал наугад), дальше определяем размер таблицы, отнимаем 2px рамку и задаем ширину width: 118px, и конечно же задаем box-sizing: border-box, иначе ширина ячеек будет с учетом внутренних отступов.

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

Далее скрываем ненужную нам колонку:

.col-3 {
display: none;
}

Почти готово. И на этом этапе у меня возникли проблемы, я никак не мог понять почему не схлопываются границы таблицы, ведь я все делаю верно. Долго мучился и полез искать подсказки, оказалось, что свойство border-collapse: collapse не работает с режимом отображения table-cell, в задачу я решил, но объяснить почему так, пока не могу. Но вот так заработало.:grinning:

.table {
border-collapse: collapse;
}

.row {
display: table-row;
}

:checkered_flag: Задача выполнена на 100%, но у меня все еще остались вопросы, слишком все запутано как-то.


#2

Подправьте первое правило, селектор не видно.
border-collapse: collapse; работает только, если прописано для контейнера таблицы.


#3

как я понял, border-collapse: collapse не срабатывал, потому что у тебя были ячейки ( cell) но не было строк для ячеек (row) и браузер не видел эти ячейки как таблицу. В одной и сттаей рассказывалось про это


#4

А вот мое решение на 100%

/* Cтили, которые можно изменять */
.column {
display: inline-block;
padding: 10px;
width: 76px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
border-spacing: 5px;
float: left;
margin: 0px 14px 10px 0px;
}

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

}
.row {
display: table-row;
}
.col-3 {
display: none;
}


#5

Ну и как здесь текст поменять?


#6

вполне вероятно, что ты применил display: none; не совсем там
нужно
.col-3 {
display: none;
}

а так скинь код, будет все понятно


#7

Потому что Вы не задали для .table { display: table;}, браузер не знает где границы самой таблицы. Ineska, как всегда, права.


#9

У меня получилось точно так же. Единственное что я не понял, как в селекторе .column высчитывался внешний отступ margin-right: 10px. Я его установил методом подбора, но так и не понял почему именно 10px. Ведь если установлен box-sizing: border-box; значит внешний отступ является расстоянием от рамки до рамки. а там явно больше, примерно 15px


#10

100 % РЕШЕНИЕ

html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

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

.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;
border: 2px solid white;
}

.row {
display: table-row;
}

.col-3 {
display: none;

}


#11

.column {
margin-bottom: 10px;
margin-right: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display:inline-block;
vertical-align: top;
width: 76px;

}
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 1px solid white;
display: table-cell;
width: 97px;
}
.col-2{
padding-right: 10px;
}
.col-3{
display: none;
}

94% Дальше мозгов не хватило( боролся с этой задачкой примерно полтора часа.


#12

Здравствуйте! Задание выполнено на 95%. Помогите разобраться, почему не схлопываются границы верхней и нижней строки таблицы. добавление свойства display: table-row для селектора .row ничего не меняет. Спасибо!

!html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

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

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
border: border-collapse;
}
.table .row{
display: table;
border-collapse: collapse;
}
.col-1,
.col-2,
.col-3{
display: table-cell;
width: 96px;
}
.col-3{
visibility: hidden;
}


#13

display: table; нужно задавать для .table.