10/18 100%

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

Всем привет) Как думаете так пойдет или возможно где-то что-то лучше изменить? Буду рад выслушать советы)
.formula {
display: table;
margin: 10px;
width: 500px;
border-collapse: collapse;
}
.formula ul{
display: table-row;
}
.formula li {
display: table-cell;
border: 1px solid #777777;
text-align: center;
vertical-align: middle;
padding:5px;
}

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

.formula .content {
display: table-row-group;
border-top: 0px solid;
}
.formula header {
display: table-header-group;
}
.formula header li{
border-bottom: none;
}

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

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

1 лайк
2

Всё и так хорошо, ничего лишнего. Менять здесь нечего.

1 лайк
3

Правда?Спасибо)

4

Здравствуйте. У меня вопросик. Я обошлась без класса .column-last возможен ли этот вариант на жизнь или это неправильно?

.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;
}
.formula li {
display: table-cell;
border: 1px solid #777777;
text-align: center;
vertical-align: middle;
padding: 5px;
}

.formula header {
display: table-header-group;
background: #ffffff;
}
.formula .content {
display: table-row-group;
}

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