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

AlexP · 18.Май.2016 01:09:46

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

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

Ineska · 18.Май.2016 07:24:55

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

AlexP · 18.Май.2016 18:08:36

Спасибо!

LSP · 19.Сентябрь.2016 15:42:49

У меня тоже немного не сходятся сдвиги, хотя изначально задавала 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;
}

Ineska · 19.Сентябрь.2016 17:17:39

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

LSP · 20.Сентябрь.2016 10:55:40

Спасибо! =)

magistr4815 · 01.Апрель.2018 09:56:42

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

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

NoNoNever · 25.Октябрь.2018 21:26:22

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

Maksov · 20.Январь.2019 16:10:22

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

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

melli10 · 22.Июнь.2019 09:24:32

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

everhard · 22.Июнь.2019 09:45:15

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

melli10 · 22.Июнь.2019 10:41:51

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

everhard · 22.Июнь.2019 11:21:01

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

Hierumo · 22.Июнь.2019 15:02:37

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

everhard · 22.Июнь.2019 15:36:48

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

The_road_up · 22.Август.2019 07:01:42

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

Zaec · 01.Май.2020 11:59:56

.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%

Yevgeniy2020 · 18.Ноябрь.2020 20:10:13

.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%
ваше мнение

Exgart · 29.Ноябрь.2020 18:19:35

Сводка

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

pitbrest · 24.Май.2021 16:23:25

Объясните пжл кто-нибудь почему в моем коде когда задаю цвет бэкграунда для .column-group .column ничего не происходит а .column-last хотя и идет после группы из трех колонок оказывается на втором месте?

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

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

.formula {
display:table;
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 ul {
display:table-row;
}

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

header {
display: table-header-group;

}

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

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

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

}

.column-group .column {
background-color:red;
}

.column-last {
display:table-column;
background-color:yellow;
}