23/23 Последнее испытание. Ширина последней таблици

При изменении ширины последней таблицы, точнее первых двух столбцов col-1 и col-2, изменяется ширина только второго столбика col-2 при значении width: 55px, 65px, 75px. А уже при значении 85px изменяются оба столбика col-1 и col-2. В чём причина того, что ширина первого столбика col-1 при первых 3-x значениях(55px, 65px, 75px) не изменялась ?



На всякий случай:
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
margin: 0 10px 10px 0;
vertical-align: top;
width: 76px;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
}

.row {
display: table-row;
}

.col-3 {
display: none;
}

.col-1, .col-2 {
width: 85px;
}

Первый столбец по умолчанию имеет такую ширину как слово “Табличные” с учетом отступов по 10px справа и слева. То есть даже если вы напишите ширину 25px, то на нем это никак не отразится.

Понял, спасибо

уже давно тут никто не сидит, но я решила все равно скинуть. Код на 100% если кому-то понадобится)

/* Базовые стили, изменять не нужно */
.column {
margin-bottom: 20px;
margin-right: 16px;
padding: 10px;

background-color: rgba(0, 255, 255, 0.2);
}

.table {
border-collapse: collapse;
}

.cell {
padding: 5px 9px;

background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

/* Cтили, которые нужно изменять */
.column {
display: inline-block;
vertical-align: top;
width: 80px;
}

.table {
display: table;

}

.row {
display: table-row;
}

.cell {
display: table-cell;
width: 100px;

}
.col-3{
display: none;
}

3 лайка

тоже 100%. Надеюсь, что правильно)

/* Базовые стили, изменять не нужно */
.column {
margin-bottom: 20px;
margin-right: 16px;
padding: 10px;

background-color: rgba(0, 255, 255, 0.2);
}

.table {
border-collapse: collapse;
}

.cell {
padding: 5px 9px;

background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

/* Cтили, которые нужно изменять */
.column {

display: inline-block;
vertical-align: top;
width: 80px;

}

.table {
display: table;
}

.row {
display: table-row;
}

.cell {
display: table-cell;
}

.col-1 {
padding-right: 30px;
}

.col-2 {
padding-right: 59px;
}

.col-3 {
display: none;
}

100%

/* Базовые стили, изменять не нужно */
.column {
margin-bottom: 20px;
margin-right: 16px;
padding: 10px;

background-color: rgba(0, 255, 255, 0.2);
}

.table {
border-collapse: collapse;
}

.cell {
padding: 5px 9px;

background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

/* Cтили, которые нужно изменять */
.column {
display: inline-block;
vertical-align: top;
width: 80px;
}

.table {
display: table;
}

.row {
display: table-row;
}

.cell {
display: table-cell;
width: 100px;
}

.col-3 {
display: none;
}

1 лайк

Еееее, у меня тоже такой код :slight_smile: