А, как отправлено, так и было скопировано.
Да, я криво навел, сейчас на границе заметил, что вылезло div.table.
Без display: table-row задание никак пройти больше нельзя?
Не надо без row. Это стандартная структура таблицы: контейнер table > строка row > ячейка cell.
Попробуйте box-sizing: border-box; чтобы не высчитывать ширину элементов.
вот мои 100%
[details=Summary]/* 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;
}[/details]
Прошу помощи, не пойму почему границы не схлопываются.
/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
padding-right: 16px;
margin-right: 11px;
}
div:first-child{
padding-right: 24px;
}
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
div.table {
display: table
border-collapse: collapse;
}
.row {
dis play: table-row;
bor der-collapse: collapse;
}
.cell {
display: table-cell;
bor der-collapse: collapse;
width: 120px;
box-sizing: border-box;
}
.col-3{
display: none;
}
Пропустил точку с запятой. Вопрос решён.
Знак ; потеряли.[quote=“Awers, post:25, topic:4843”]
.row { dis play: table-row; bor der-collapse: collapse;}.cell { display: table-cell; bor der-collapse: collapse;
[/quote]
А здесь это свойство не задается. Не надо его ставить куда попало.
Можно так:
.table {
border-collapse: collapse;
}
.row {
display: table-row;
}
.column {
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 100px;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.cell {
padding: 5px 10px;
display: table-cell;
box-sizing: border-box;
width: 118px;
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.col-3 {
display: none;
}
а за таблицу у вас кто? я про свойство display:table;
не до конца понял вопрос. Вы подразумеваете что border-collapse: collapse; должно примениться к элементу у которого сначала прописен display:table;?
я о том, что если вы решили какие-то элементы сделать ячейками таблицы, прописав им display: table-cell; то логично было бы указать (с помощью display: table;), кого из родителей вы делаете таблицей
а, понял) ну да, было бы логично, но я этого не делал
ну а если оставить логику-нелогику в стороне, то блоки с display:block и display:table ведут себя по разному: в первом случае - растягиваются по ширине родителя, во втором - ужимаются под содержимое. Вы для div.table тип на табличный не переопределяли и он остался по умолчанию - блочным. Задайте для этого блока любой фоновый цвет - и вы увидите его размеры. А теперь пропишите для него display:table и - почувствуйте разницу.
1 лайк
Отлично! Спасибо:+1:
У меня получилось как то так.
/* Cтили, которые нужно изменять */
.column {
width:80px;
display: inline-block;
vertical-align:top;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width:100px;
}
.col-3{
display:none;
}
1 лайк
У меня получилось так. 100%
/* Cтили, которые нужно изменять */
.column {
width: 80px;
display: inline-block;
vertical-align: top;
}
.table {
display: table;
border-collapse: collapse;
width: 240px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.col-3 {
display:none;
}
.cell.col-1 {
width: 100px;
}
Вот такой мой вариант если кому вдруг пригодится. Safari , 100%
.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;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px
}
.col-3 {
display: none;
}
/* Базовые стили, изменять не нужно */
.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;
width: 80px;
vertical-align: top;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
Не знаю как вы пришли к таким цифрам, у меня такое решение:
/* Cтили, которые нужно изменять */
.column {
display: inline-block;
vertical-align:top;
width: 80px;
}
.table {
display: table;
width: 240px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px;
}
.col-3 {
display: none;
}
Правильный вариант только такой
/* Базовые стили, изменять не нужно */
.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 {
width: 80px;
display: inline-block;
vertical-align: top;
}
.table {
display: table;
width: 240px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px;
}
.col-3 {
display: none;
}