23/23 Помогите убрать двойные рамки

Курсы §10. Блочная модель документа
1

Помогите пожалуйста убрать двойные рамки, border-collapse: collapse убирает только горизонтальные двойные рамки, между верхним и нижним контейнерами рамки так и остаются двойными(

/* Базовые стили, изменять не нужно */

html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

/* Cтили, которые можно изменять */
.column {
display: inline-block;
width: 76px;
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
margin-right: 10px;
vertical-align: top;
}

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

.col-3 {
display: none;
}

2

Доброй ночи! Так а где Ваша таблица? Border-collapse работает только с таблицей. А у Вас просто набор разрозненный ячеек, но никак не таблица. А где display: table-row? А где display: table у соответствующих элементов?

3

Без них обошелся, зачем мне table-row и display: table,чем короче код,тем лучше,мне только рамки эти надо убрать,можно ведь и не по шаблону,лишь бы рамок не было

4

Ну, так схлопывание границ задаётся таблице в целом, насколько я помню. Чему Вы тогда хотите задать border-collapse?

5

А как мне приписать им свойство таблицы? а в целом я хотел задать схлопывание отдельным ячейкам,если такое возможно, по горизонтали они же схлопнулись

6

Я скопировал Ваш код в мини-браузер задания. Я не вижу, чтобы по горизонтали они схлопнулись. Каким свойством Вы этого добились и какому элементу его задали?

7

Потому что я и не прописывал схлопывание,чего толку,если оно работает только на 50%)))
но если приписать схлопывание диву скажем,то оно сработает по горизонтали

8

Но у меня даже на 10% не работает! Просто стало интересно, как можно использовать это свойство только на ячейках. Не будете ли Вы так любезны продемонстрировать, какому диву и как Вы его прописывали, что оно срабатывает на 50%?

9

Эту строчку в мой код пропишите в конце и все

div {
border-collapse: collapse;
}

10

Действительно, ОЧЕНЬ интересный феномен! Однако я, хоть и не отношу себя к очень опытным участникам форума, считаю, что краткость кода должна идти не в ущерб его логичности и ясности. А свойство border-collapse задаётся только или тегу table, или элементам со свойством display: table. Поэтому я оформил бы ячейки в финальном задании в полноценную таблицу и задал ей это свойство. Как оформить ячейки в таблицу - пошагово и очень понятно разобрано в последних разделах “Блочной модели”, начиная с display: table. Удачи!

11

Я,к слову, и дисплеи менял,и таблице задавал,все равно не помогло

12

А про display: table-row Вы не забыли, наряду с display: table и display: table-cell?

13

Где вы это взяли?

1 лайк
14

Да мне все равно как делать, я просто хочу сделать оптимально и точно,что мне нужно добавить?

15

По-моему вы сами себе противоречите. В любом случае @Alexey_Ivanov много написал выше о том, что и почему нужно добавить.

16

Сработало,добавив такую строчку,но я не понимаю,почему с дивом такая штука работает,а если селектор на .table поменять,то не работает

div {
display: table-row;
border-collapse: collapse;
}

1 лайк
17

Как слово “table” на русский переводится?

18

как таблица,но к чему вопрос

19

По-моему логично элементу с классом .table задать display: table; (то есть отображение таблицей), а вы задаете table-row (отображение рядом таблицы).

20

в этом коде я задавал схлопывание таблице,не сработало, только div сработал и верх-низ и право-лево)