Таблицы на CSS / Испытание: строим таблицу на CSS [10/18]

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

Добрый день,

Прошу вас оценить мое решение!

Спасибо!

/* Используемые цвета:

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

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

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

.formula ul {
display: table-row;
list-style: none;
}

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

.formula header {
display: table-header-group;
}

.formula header li {
padding: 5px;
background-color: #ffffff;
}

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

.formula .content li {
padding: 5px;
}

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

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

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

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

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

2

задайте внутренний отступ .formula li, фоновый цвет .formula header и уберите это правило и правило .formula .content li {
padding: 5px;
}, они не нужны.

.formula .content-important li {
background-color: #fffebc;
} - здесь уберите li. Фон нужно задавать не пунктам списка, а ячейкам/строкам, как у вас идет дальше. Следовательно .formula .content-important {
display: table-footer-group;
}
и
.formula .content-important li {
background-color: #fffebc;
}
объединяется в одно правило.