CODEWITHSUNDEEP
css
Manic Depression
Manic Depression

Reputation: 1040

Add border to divs to look like a table

I need to create two columns which looks like a table with nice 1px border. Border kills the layout. And is there any nice way how to have nice border with a single line in the middle?

.column-5 { width:50%; float:left; }
.border-light { border: 1px solid black; }
<div class="row">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>

http://jsfiddle.net/7zdLdmey/

Upvotes: 0

Views: 3165

Answers (6)

nazmul.3026
nazmul.3026

Reputation: 1008

HTML

 <div class="row">
      <div class="column-5 border-light">
        column 1
      </div>
      <div class="column-5 border-light lastRow">
        column 2
      </div>
    </div>

CSS

 .column-5{width:50%; float:left;}
    .border-light { 
     border-top: 1px solid black;
     border-left: 1px solid black;
     border-bottom: 0px solid black;
     border-right: 1px solid black;
    }
    .lastRow { 
     border-bottom: 1px solid black;
    }

Upvotes: 0

Just use Flex
Just use Flex

Reputation: 86

I've demonstrated a few methods you can explore to achieve the intended outcome with the Code Snippet embedded below.

It includes examples which account for more than x2 nested children elements.

Essentially, it comes down to using pseudo-class selectors.

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user hovers over it.

Want to know more? https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

.column-5 { width:50%; float:left; }
.border-light { border: 1px solid black; }

/* Additional */

.column-5:not(:last-child) { /* if .row will only have x2 nested children */
  border-bottom: 0px;
}
/* OR */
.column-5:first-child { /* if .row will only have x2 nested children */
  border-bottom: 0px;
}

.many-nested.even .column:nth-child(even) { /* if .row will only more than x2 nested children */
  border-top: 0px;
}
/* OR */
.many-nested.odd .column:nth-child(odd) { /* if .row will only more than x2 nested children */
  border-bottom: 0px;
}

/* Clear floats */

br {
  clear: both;
  margin: 20px auto;
  display: block;
}
<div class="row">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>
<br>
<!-- Note: additional classes added purely as demonstration and selector specificity -->
<div class="row many-nested even">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>
<br>
<div class="row many-nested odd">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>

Upvotes: 0

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

Remove border and use outline instead:

.column-5 { width:50%; float:left; }
.border-light { outline: 1px solid black; }
<div class="row">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>

Upvotes: 1

Terry
Terry

Reputation: 66208

The reason why adding border "kills" the layout is because border widths are not taken into account when computing the width (which uses the content-box layout by default). The sum of the width of the two containers will be 50% + 50% + 4px (4 times 1px borders), which exceeds 100%. This causes the second <div> element to wrap to the next line.

This can be easily solved by using box-sizing: border-box. What this property does is that it forces the width computation to include any border sizes present on the element, such that the inner width plus the border size adds up to the declared width.

.column-5 {
  width: 50%;
  float: left;
  
  /* Force width to take into account border size */
  box-sizing: border-box;
}

.border-light {
  border: 1px solid black;
}
<div class="row">
  <div class="column-5 border-light">
    column 1
  </div>
  <div class="column-5 border-light">
    column 2
  </div>
</div>

Here is an illustration that helps you understand the three different possible values of the box-sizing attribute (source):

Different box-sizing values

  1. content-box (default) does not take into account paddings and borders
  2. padding-box takes into account paddings only (not what you want)
  3. border-box takes into account paddings and borders

p/s: None of these box-sizing properties take into account margins, since they are technically outside the box.

Upvotes: 5

Ehsan
Ehsan

Reputation: 12969

Insert box-sizing: border-box; to .column-5 :

.column-5 {
    width:50%;
    float:left;
    box-sizing: border-box;
}

.border-light {
    border: 1px solid black;
}
<div class="row">
  <div class="column-5 border-light">
    column 1
  </div>
  <div class="column-5 border-light">
    column 2
  </div>
</div>

Upvotes: 2

ankita patel
ankita patel

Reputation: 4251

Try this.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.column-5{
  width:50%;
  float:left;
}
.border-light { 
  border: 1px solid black;
  border-right:0; 
}
.border-light:last-child{
  border-right: 1px solid black;
}
<div class="row">
  <div class="column-5 border-light">
    column 1
  </div>
  <div class="column-5 border-light">
    column 2
  </div>
</div>

Upvotes: 1

Related Questions