Прокомментируйте код.

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

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

}

.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
display:table-caption;
caption-side:bottom;
}
li{vertical-align:middle;}
.formula ul{
display:table-row;
}
.formula ul li{
display:table-cell;
}
.formula header{
display:table-header-group;
}
.formula .content{
display:table-row-group;
}
.formula .content-important{
display:table-row-group;
}
.formula li{
border:1px solid #777777;
}
.formula .content li{
padding:5px;
border-top:none;
}
.formula header li{
padding:5px;
}
.column{
display:table-column;
}
.column-group{
display:table-column-group;
background:#b2fdd0;
}
.column-last{
display:table-column;
background:#ffbaba;
}
.content-important{
display:column;
background:#fffebc;
}
header{
display:column;
background:#fff;
} `

2

Можно и покороче:
.formula {
margin: 10px;
width: 500px;
border-collapse: collapse;
display:table;
text-align:center;
/*vertical-align:middle;*/
}

.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
display:table-caption;
caption-side:bottom;
}
li{
vertical-align:middle;
padding: 5px;
}
.formula ul{
display:table-row;
}
.formula ul li{
display:table-cell;
}
.formula header{
display:table-header-group;
}
.formula .content{
display:table-row-group;
}
/*.formula .content-important{
display:table-row-group;
}*/
.formula li{
border:1px solid #777777;
}
.formula .content li{
/*padding:5px;*/
border-top:none;
}
/*.formula header li{
padding:5px;
}*/
.column{
display:table-column;
}
.column-group{
display:table-column-group;
background:#b2fdd0;
}
.column-last{
/*display:table-column;*/
background:#ffbaba;
}
.content-important{
/*display:column;*/
background:#fffebc;
}
header{
/*display:column;*/
background:#fff;
}

P.S. А что такое display: column; ?..

3

dispaly: column - это поторопился и накосячил😂

4

вот я немного не понимаю вообще необходимости например в данном задании table-column-group если можно и без него обойтись, щас занимаюсь подготовкой своего первого проэкта, на форум ссылку скину с табличкой на css оценишь.

5

Это где можно обойтись без table-column-group?)

6

впринципе в задании, наверно, блин от компа ушел уже не смогу попробовать))))

7

Слово “наверное” мне тут нравится…) Может и можно, но так явно короче.

8

Дома буду попробую и еще код сокращю нашел варианты

9

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

li{vertical-align:middle;}

.formula ul{
display:table-row;
}
.formula ul li{
display:table-cell;
}
.formula header{
display:table-header-group;
border-top:none;
}
.formula .content{
display:table-row-group;
}
.formula li{
border:1px solid #777777;
}
.formula li{
padding:5px;
}
.column{
display:table-column;
}
.column-group{
display:table-column-group;
background:#b2fdd0;
}
.column-last{
display:table-column;
background:#ffbaba;
}
.content-important{
background:#fffebc;
}
header{
background:#fff;
} `
оптимизировал чутка, и да можно обойтись вполне без дивов, но я думаю это нужно было для учебного процесса больше чем для того чтоб это применялось в будущем практически, ведь html код удлиняется, в CSS тоже лишние селекторы появляются. Другое дело если такой подход валиден нежели подход просто окраски ячеек свойство background

10

При такой записи классов в html-коде:
<div class="column column-last"></div>
в этом правиле display:table-column; можно не писать:
.column-last{
/display:table-column;/
background:#ffbaba;
}

1 лайк
11

Абсолютно согласен, не обратил внимания на это, ведь свойство уже было задано.