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

Привет. Помогите разобраться полностью с заданием. Немного не сходятся сдвиги.

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

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

.formula {
    display:table;
    }
    
.formula  ul {
    display:table-row;
     height:55px; 
    }
    
.formula li {
    display:table-cell;
    border:1px solid #777777;
    text-align:center;
    vertical-align:middle; 
    }
    
.formula header {
    display:table-header-group;
    background:white;
        }
        
.formula header ul {
    height:30px;
    text-align:center;
    }

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

.formula .content-important li {
   background:#fffebc;
    }  
    
.formula .column-group {
    display:table-column-group;
    background:#b2fdd0; 
    }
    
.formula .column {
    display:table-column;
    }
    
.formula .column-last {
        background:#ffbaba; 
        }

Вместо высоты для ul задайте внутренние отступы 5px для li.

2 Симпатий

Спасибо!

У меня тоже немного не сходятся сдвиги, хотя изначально задавала padding для li - 5pх. Где я ошиблась?
/* Используемые цвета:

#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;
}

.formula ul {
display: table-row;
border: 1px solid black;
}

.formula li {
padding: 5px 0px;
display: table-cell;
border: 1px solid #777777;
text-align: center;
vertical-align: middle;
}
.formula header {
display: table-header-group;
background-color: #ffffff;
}

.formula .content {
display: table-row-group;
}
.content-important {
background-color: #fffebc;
}

.column {
display: table-column;
}

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

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

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

1 Симпатия

Так и надо:
.formula li {
padding: 5px;
display: table-cell;
border: 1px solid #777777;
text-align: center;
vertical-align: middle;
}

2 Симпатий

Спасибо! =)

Можно ли как то короче?

.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 .column-group {
    display: table-column-group;
    background: #b2fdd0;
}
.formula .column {
    display: table-column;
}
.formula .column-last {
    background: #ffbaba;
}
.formula header { 
    display: table-header-group;
    background: #fff;
}
.formula .content {
    display: table-row-group;
}
.formula .content-important { 
    display: table-footer-group; 
    background: #fffebc;
}
.formula ul {
    display: table-row;
}
.formula ul li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #777777;
    padding: 5px;
}

Ничего лишнего не увидел :ok_hand:t2:

10/18 - 100%
.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;
}

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

ul {
  display: table-row;
}

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

header {
  display: table-header-group;
  text-align: center;
}

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

.column {
  display: table-column;
}

.content ul {
  background: #b2fdd0;
}

ul li:last-child {
  background: #ffbaba;
}

header ul li:last-child {
  background: #ffffff;
}

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

Возможно есть лишнее.

.formula ul li , проверка проходит и без ul - .formula li. Проходить проходит, но я не знаю как будет правильнее, и что лучше, без ul или с ul. Хотелось бы услышать других, тех кто разбирается, нужна ли эта ul.

Правильны оба варианта.
Есть понятие специфичности селекторов.
По ссылке выше - курс академии, внимательно пройдите его, там фундаментальные вещи которые стоит не то чтобы наизусть знать, но помнить о них и понимать.

Я её вроде прошла, может не совсем поняла, но прошла. Не знаю правильно ли я поняла изученное, но в данном случае нам не нужно же чтобы он был специфичнее чего-то, так? А значит ul можно смело отбросить и даже нужно, так как судя по прочитанному, как в сообществе все стараются уменьшить код, считается чем меньше код, тем он лучше. Правильно?

Да, все правильно.
Специфичность, как один из “китов” CSS, несет как и пользу, так и некоторый вред. Плохо - это когда эту особенность используют необдуманно или чрезмерно.
Тема организации кода в CSS - чрезвычайно важная для разработчиков. Когда немного освоитесь, поищите в сети на тему “CSS-методологии” или “способы организации CSS кода”.

пожалуйста не пугайте человека BEMом, дайте человеку сохранить психику в покое =)

Поэтому, я стараюсь предварять подобные советы фразой вроде “Когда немного освоитесь” :grin:

Пока пытался сделать это задание - чуть не вскрылся. В итого всё равно сдался. :tired_face:

1 Симпатия

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

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

header {
display: table-header-group;

}

header ul {
display: table-row;

}

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

.content {
display: table-row-group;

}

.content ul {
display: table-row;

}

.content li {
margin: 0;
padding: 5px;
text-align: center;
vertical-align: middle;
display: table-cell;
border: 1px solid #777777;
border-top: none;
}

.content li:last-child {
background-color: #ffbaba;
}

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

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

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

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

100%

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

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

.formula ul {
display: table-row;
}

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

.formula header li {
border-bottom: 1px;
}

.formula header {
display: table-header-group;
//border: 1px solid #777777;
}

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

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

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

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

.formula .content li:last-child {
background-color: #ffbaba;
}

.formula .content ul:last-child li {
vertical-align: middle;
}

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

100%
ваше мнение

:monkey:

Сводка
.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;
}

.formula {
  display: table;  
}

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

.formula header li {
  border-bottom-style: none;
  background: #fff;
}

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

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

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

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

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

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

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