10/18 Строим таблицу: проблемы с шапкой

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

Всё получилось, но шапка почему-то не уезжает вверх, оставаясь посреди таблицы. Делаю в Мозилле, так что браузер не мог создать проблем, по идее.

Сводка

.formula {display:table;
margin: 10px;
width: 500px;
border-collapse: collapse;
}
.formula .content {display:table}
.formula p {
display:table-caption;
caption-side:bottom;
font-size: 20px;
text-align:center;
width:500px;
margin:10px;
}
header {border-collapse: collapse; width: 500px; display:table;}
.content {display:table-row-group;}
ul {display:table-row}
li {display:table-cell; border: solid 1px #777777; background-color:#b2fdd0; padding:5px; width:114px; text-align:center; }
ul li:last-child {background:#ffbaba}
.content-important ul li:last-child {background:#fffebc}
header ul {display:table-header; }
header ul li {background-color:#ffffff; border-bottom:none;}
.content-important {display:table-footer;}
.content-important ul li {background:#fffebc;}
header ul li:last-child {background:#ffffff;}
.column-last, .column-group {display:none;}

2

где у вас table-row-group и table-header-group?
задавать ширину не надо кроме как элементу table
для красоты лучше селекторы писать вместе с “протородительским” классом

открывать в случае осознания своей бесполезности 
.formula {display:table;
margin: 10px;
width: 500px;
border-collapse: collapse;
}
.formula .content {display:table-row-group}
.formula p {
display:table-caption;
caption-side:bottom;
font-size: 20px;
text-align:center;
padding:10px;
margin: 0;
}
header {display:table-header-group;}
.content {display:table-row-group;}
ul {display:table-row}
li {display:table-cell; border: solid 1px #777777; background-color:#b2fdd0; padding:5px; text-align:center; vertical-align: middle;}
ul li:last-child {background:#ffbaba}
.content-important ul li:last-child {background:#fffebc}
header ul {display:table-header; }
header ul li {background-color:#ffffff; border-bottom:none;}
.content-important {display:table-footer;}
.content-important ul li {background:#fffebc;}
header ul li:last-child {background:#ffffff;}
.column-last, .column-group {display:none;}
по красоте (открывать в случае совершенствования своих навыков) 
.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 header {
  display: table-header-group;
  background-color: #ffffff;
}
.formula li {
  display: table-cell;
  border: 1px solid #777777;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}
.formula .content {
  display: table-row-group;  
}
.formula .content-important {
  background-color: #fffebc;  
}
.formula .column-group {
  display: table-column-group;  
}
.formula .column {
  display: table-column;
}
.formula .column-group .column {
  background-color: #b2fdd0;
}
.formula .column-last {
  background-color: #ffbaba;
}
1 лайк