Как настроить границу div в моем случае?

Question

У меня есть вопрос о границе DIV элемента

Я пытаюсь создать кучу divs, которая действует как table

так

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

Мой КСС

.div{ 
border: solid 1px black; 
} 

У всех моих div есть границы, но проблема в том, что все мои верхние и нижние границы divs равны 2 px вместо 1px, потому что мой css применяет 1 px на каждом div. Второй и третий div имеют границу мыслителя сверху и снизу.

Я не могу изменить имя класса, потому что оно динамически генерируется. Есть ли способ обойти эту проблему?

Большое спасибо!

Answer 1

Снимите верхнюю границу с каждого элемента, кроме первого.

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

Here пример разницы.

Answer 2

ты судимый написать что-то вроде этого:

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

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

Answer 3

Попробуйте добавить это к вашим стилям.

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

Затем добавьте это к вашему телу:

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