CODEWITHSUNDEEP
csshtml
FlyingCat
FlyingCat

Reputation: 14250

How to setup the div border in my case?

I have a question regarding the div element border

I am trying to create bunch of divs that acts like a table

so

<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div'>four</div>

My css is

.div{
border: solid 1px black;
}

All my divs have borders but the problem is all my divs's top and bottom border are 2 px instead of 1px because my css apply 1 px on every div. The second and the third div have thinker border on top and bottom.

I can't really change the class name because it's dynamically generated. Is there anyway to work around this issue?

Thanks a lot!

Upvotes: 0

Views: 56

Answers (3)

Itay
Itay

Reputation: 16777

Remove the top border from every element except of the first one.

.div {
    border-style: solid;
    border-color: black;
    border-width: 0 1px 1px 1px;
}
.div:first-child {
    border-width: 1px;
}

Here's an example of the difference.

Upvotes: 2

adamdesign
adamdesign

Reputation: 190

Try to add this to your styles.

<style>
.div{
border: solid 1px black;
border-bottom:none;
}
.div2{
border: solid 1px black;
}
</style>

Then add this to your body:

<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div2'>four</div>

Upvotes: 0

user1956570
user1956570

Reputation: 142

did you tryed write something like this : 

.div {
border:1px solid  black;
border-bottom:0;
}

.div:last-child {
border-bottom:1px solid black;
}

Upvotes: 1

Related Questions