10/18 100% нужна помощь

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

Добрый день!
Сделал задание на 100%, но пришлось прибегнуть к специфичности, т.к. если группировать колонки, то цвет устанавливается на всю колонку включая ячейки заголовки.
Принимается ли подобное решение? Или направьте в нужное русло
Спасибо!
.formula {
display: table;
margin: 10px;
width: 500px;
border-collapse: collapse;
border-bottom: 1px solid #777777;
}

.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
display: table-caption;
caption-side: bottom;
text-align: center;
}
.formula ul {
display: table-row;
}
.formula li {
display: table-cell;
vertical-align: middle;
padding: 5px 5px 5px 5px;
border: 1px solid #777777;
border-bottom: none;
}
.formula header {
display: table-header-group;
text-align: center;
}
.content {
display: table-row-group;
text-align: center;
}
.formula .content ul:first-child,
.formula .content ul:nth-child(2) {
background-color: #b2fdd0;
}
.formula .content ul li:last-child {
background-color: #ffbaba;
}
.formula .content-important ul li,
.formula .content-important ul li:last-child {
background-color: #fffebc;
}

2

Манипуляции с рамками вам понадобились, потому что не задали display: table-column; (для какого элемента, думаю догадаться будет не трудно).
В зеленый цвет надо красить .column-group, то есть три колонки по две ячейки, последняя строка таблицы при этом не закрашивается.
Тогда для покраски в оранжевый хватит селектора .formula .content-important.
Остается розовый, для этой колонки из двух ячеек есть класс .column-last.

3

Спасибо, допер

4

Посмотрите, пожалуйста, код.

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

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

header {
  display: table-header-group;
}

header ul {
  display: table-row;
}

header ul li {
  display: table-cell;
  border: 1px solid #777777;
  border-bottom: none;
  padding: 5px;
  text-align: center;
  background-color: #ffffff;
}

.content {
  display: table-row-group;
  text-align: center;
 }

.content ul {
  display: table-row;
}

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

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

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

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

.column-last {
  background-color: #ffbaba;
}



Спасибо)
5

Зачем дважды пишете table-row для ul и table-cell для li?

6

Полагала что это поможет поделить таблицу на ряды и ячейки.
Ааа, вы имеете в виду в header и в content ? Это я что-то сглупила. Правильно я понимаю что было бы вполне достаточно по одному разу задать ячейки и ряды в классе formula?

7

Не для .formula. Для ul и li, не уточняя где они, в header или content. Просто код короче будет.

1 лайк
8

Спасибо)