10/18 100%

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

Помогите!!! Хелп! Последние ячейки не могу раскрасить в розовый цвет! Хотел раскрасить их задав колонке .column-last цвет, но ничего не выходит. Что делать??

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

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

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

.formula p {
    margin: 0;
    padding: 10px;
    font-size: 20px;
}

.formula {
    display:table;
    
    }

.formula  li {
    display:table-cell;
   
    }
.formula  ul {
    display:table-row;
    }
    .formula header {
    display:table-header-group;    
        }
.formula header li{
    white-space:nowrap;    
        }
 .formula p   
     {display:table-caption;
     caption-side:bottom;
     text-align:center;
    }    
.formula .content {
    display:table-row-group;
    }
  .formula li {
      padding: 5px 25px;
      border:1px solid #777777;
      text-align:center;
      vertical-align:middle;
      }  
 
.formula .content { 
  background-color:#b2fdd0;            
            }
           
         

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




.formula .column {
    display:table-column; 
     }  
.formula .column-group,
.formula .column-last{
    display:table-column-group;
        }
   .formula .column-last {
       display:table-column;
        background-color:#ffbaba; 
     }
2
3

Спасибо, вот с учетом правок 100% .

Для тех кто столкнулся с проблемами - важно:

  1. Сделать структуру таблицы внимательно смотря в HTML.
  2. Группировать колонки или строки, внимательно смотря в HTML.
  3. В конце задавать цвета, внимательно смотря в HTML.

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

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

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

.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
}

.formula {
display:table;

}

.formula li {
display:table-cell;

}

.formula ul {
display:table-row;
}
.formula header {
display:table-header-group;
}
.formula header li{
white-space:nowrap;
}
.formula p
{display:table-caption;
caption-side:bottom;
text-align:center;
}
.formula .content {
display:table-row-group;
}
.formula li {
padding: 5px 5px 5px 5px;
border:1px solid #777777;
text-align:center;
vertical-align:middle;
}
.formula .content-important {
background-color:#fffebc;
}
.formula header {
background-color:#ffffff;
}

.formula .column {
display:table-column;
}
.formula .column-group,
.formula .column-last{
display:table-column-group;
}
.formula .column-last {
background-color:#ffbaba;
}
.formula .column-group {
background-color:#b2fdd0;
}

1 лайк
4

Старайтесь не писать правила, которые никак не влияют на наш код.

5

спасибо!!

6

Еще меньше кода:

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

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

.formula ul {
display: table-row;
}

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

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

header {
display: table-header-group;
background-color: #fff;
}

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

.column {
display: table-column;
}

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

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

1 лайк