Завершил на 100% но хотелось бы получить комментарии профи.
код:
.column {
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-table;
width: 76px;
}
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
}
.table{margin-top: 10px;
border-collapse:collapse;
}
.row{display:table-row
}
.col-3{display: none;
}
.col-2, .col-1{width:96px;}
1 лайк
Методом проб и ошибок. о блоке не подумал даже, чем чревато использование display: inline-table; ?
Как я понимаю так на одну строку кода меньше, не надо выравнивать блок по вертикали.
Ineska
4
Ничем не чревато. Всё правильно. Хотелось узнать, насколько вы понимаете то, что делаете.
1 лайк
Pavvel
6
Почему не задать это в общий класс .cell ?
Вот мои 100%
Использовал border-box чтобы не высчитывать ширину блока с учетом отступов, а ориентироваться по клеточкам.
/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
box-sizing: border-box;
width: 100px;
margin-right: 10px;
vertical-align: top;
}
.table {
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
}
.col-3 {
display: none;
}
.col-1, .col-2 {
box-sizing: border-box;
width: 118px;
}