CODEWITHSUNDEEP
htmlcss
Magicco
Magicco

Reputation: 41

How to make border between cells in table defined entirely by divs (double border inbetween cells)?

Im trying to make a div out of divs and I cant figure out how to prevent double border. The border between cells is 2 times bigger than outer table border. I want to know how to do it instead of using table because I might want to make a structure that cant be defined as a normal table.. like 2 rows in first column and 3 rows in second column (colspan/rowspan impossible) Other answers on stackoverflow didnt help me.

.table { width:500px;
height:300px;
display:flex;
}
.table div{
height:100%;
}
.table div div {border:3px solid blue;
width:100%;
height: 33.3333%;
}
<div class="table">
   <div>
         <div></div>
         <div></div>
         <div></div>
  </div>

  <div>
     <div></div>
     <div></div>
     <div></div>
  </div>

  <div>
     <div></div>
     <div></div>
     <div></div>
  </div>


</div>

Upvotes: 1

Views: 55

Answers (1)

Senna Oudshoorn
Senna Oudshoorn

Reputation: 57

I don't exactly understand what you mean but I think you want this result.

.table { 
   width:500px;
   height:300px;
   display:flex;
}
.table div{
   height:100%;
}
.div-wrapper {
  border:3px solid blue;
  width:100%;
  height: 33.3333%;
}
<div class="table">
   <div class="div-wrapper">
         <div></div>
         <div></div>
         <div></div>
  </div>

  <div class="div-wrapper">
     <div></div>
     <div></div>
     <div></div>
  </div>

  <div class="div-wrapper">
     <div></div>
     <div></div>
     <div></div>
  </div>


</div>

Upvotes: 1

Related Questions