Испытание 10

Курсы §29. Таблицы на CSS
1

Всем привет. Выполнил испытание на 100%, но результатом не удовлетворен, так как не смог сделать задание в соответствии с теорией. Суть в том, что в CSS не могу сделать бэкграунд колонок, а именно:
.column-group {
display: table-column-group;
}
.column-group .column {
background-color: #color;
}
и
.column-last {
display: table-column;
background-color: #color;
}

Вышеуказанные селекторы не работают, почему?
Вот мои CSS свойства:
/* Используемые цвета:

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

.formula {
margin: 10px;
width: 500px;
border-collapse: collapse;
display: table;
}

.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
display: table-caption;
caption-side: bottom;
text-align: center;
}

li {
display: table-cell;
padding: 5px;
text-align: center;
vertical-align: middle;
border: 1px solid #777777;
}

ul {
display: table-row;
}

header {
display: table-header-group;
}

header li {
border-bottom: none;
padding: 5px;
background-color: #ffffff;
}

.content {
display: table-row-group;
}

.content-important {
display: table-footer-group;
}

.content-important li {
background-color: #fffebc;
}

.column-group {
display: table-column-group;
}

.column-group .column {
background-color: #b2fdd0;
}

.column {
display: table-column;
background-color: #ffbaba;
}

%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9
Безымянный.png1465×759 91.2 KB

1 лайк
2

Я тут попытался разобраться и пришел к такому выводу: :face_with_monocle:

Если это все правила относящиеся к колонкам, то тогда стоит заметить,
что у вас фактические всего 2 колонки:

  1. Первая: div с классом .column-group

НО у нас написано display: table-column-group ,а значит определяет, что элемент является группой одной или более колонок таблицы. Далее мы не указываем, что элементы этой группы div.column является колонкой display: table-column. В итоге мы получаем группу колонок без колонок :exploding_head: :hugs:

  1. Вторая: div с классом .column-last

Если мы в редакторе введем эти правила, то мы заметим что у нас будет окрашен 2-ая колонка.

%D1%8B%D1%83%D0%B0%D1%83%D0%B0
ыуауа.png1326×800 107 KB

Скорее всего это как-то связано с тем, что у нас по определению table-column-group является группой одной и более колонок (даже на сайте w3schools так написано) Т.е. если у нас нету колонок в этой группе, то исходя из определения одна колонка уж точно будет(видимо она добавляется браузером, если он не находит другие).

А вот как задавать правило для “добавленной” колонки я уже не знаю :sweat_smile: