What exactly does [.wrap] do?

HTML & CSS
1

What exactly does this line of code do, and how come I don’t see a visual difference when I remove it? And if there is a visual difference can someone point it out to me cause I don’t see it.

With Wrap http://withwrap7654.blogspot.com/
https://jsfiddle.net/a1gspkak/9/

Without Wrap http://withoutwrap8765.blogspot.com/
https://jsfiddle.net/a1gspkak/10/

.wrap {
display:table-cell;
table-layout:fixed;
border-spacing:0px;
width:100%;
max-width:1206px;
margin:auto;
border: 0px solid red;
}
2

There is no visible with the above CSS or without it because most of the properties cannot be applied to a tablle-cell, they are table properties. In other words, they are not doing anything.

The table-rows are part of the structure of a table and are supposed to follow a table element, not follow a table-cell.

.wrap should be assigned {display:table}

3

I just did that, changed table-cell to table, and there’s still no visual difference.

4

border-collapse:collapse; also works when you apply it to outer.

Is there a difference between adding it to .wrap or .outer?

.outer {
display:table;
height:100%;
margin:0 auto; 
border-collapse:collapse;
}
5

That doesn’t mean that it makes no difference. :slight_smile:

Add {border-collapse:collapse} to .wrap. border-collapse only acts on tables. You should see a difference when .wrap is set to display:table;border-collapse:collapse. Then change display:table back to display:table-cell and see what changes, then remove the CSS entirely and watch nothing change again.

The reason your display is not changing is because browsers are creating anonymous table elements that happen to work.

6

Is there a difference between adding it to .wrap or .outer?

7

.outer and .wrap are two different elements that have been assigned {display:table}, so yes, there is a difference. Border-collapse only affects the table to which it is assigned. If the selector targets all tables, then all tables are affected.

1 Like
8

Border collapse has an effect on tcell also. That works too. Wouldn’t that be the ideal place to put it, tcell?

.tcell {
  border-collapse: collapse;
 }
9

No it doesn’t.

No it wouldn’t. border-collapse affects ALL of the cells within a table the same. It does not affect them differently.

10

Border collapse works when you put it on tcell. Are you saying it doesn’t work when you put it on tcell?

1221×399 5.12 KB

11

The image is not proof. Working code would be the proof.

Yes, I am saying exactly that.

12

Working code: Border collapse on tcell.

.tcell {
display:table-cell;
vertical-align:middle;
border-collapse:collapse;
}
13

It is doing nothing because it is in the “tcell”, HOWEVER, it is being inherited by .wrap and applied to .wrap.

14

it’s not applied to the .wrap tag element though, that doesn’t matter?

15

No. Targeting the .wrap tag directly works, of course, and targeting the parent .tcell works because border-collapse is inherited from the parent .tcell (parent element)

1 Like
16

You can demonstrate that assigning {border-collapse} to a .tcell does nothing by removing it from .outer .tcell and applying it to any of .theBoxes. There will be no collapsing of borders.

17

Adding it to html,body makes it collapse.

html, body {
height: 100%;
margin:0;
padding:0;
background: #000000;
border-collapse:collapse;
}
18

Yes, because the body element is the parent of .outer {display:table}

19

So, it works in 4 spots. I have them in 4 blogger pages, in 4 different spots, and they work in each of them.

tcell, outer, html,body, and wrap,

20

Yes.

2 Likes