Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make borders collapse (on a div)?

Tags:

css

Suppose I have markup like: http://jsfiddle.net/R8eCr/1/

<div class="container">     <div class="column">         <div class="cell"></div>         <div class="cell"></div>         <div class="cell"></div>     </div>     <div class="column">         <div class="cell"></div>         <div class="cell"></div>         <div class="cell"></div>     </div>     <div class="column">         <div class="cell"></div>         <div class="cell"></div>         <div class="cell"></div>     </div>     ... </div> 

Then CSS

.container {     display: table;     border-collapse: collapse; } .column {     float: left;     overflow: hidden;     width: 120px; } .cell {     display: table-cell;     border: 1px solid red;     width: 120px;     height: 20px;     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } 

I have the outer div with display: table; border-collapse: collapse; and cells with display: table-cell why do they still not collapse? What am I missing here?

By the way there maybe variable number of cells in a column so I can't only have borders on one side.

like image 335
Jiew Meng Avatar asked Jul 29 '13 04:07

Jiew Meng


People also ask

Which CSS property is used to make table borders collapse?

The border-collapse property in CSS is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not. Syntax: border-collapse: separate|collapse|initial|inherit; Default Value : Its default value is separate.

Which attribute is used to collapse cell borders?

The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.


2 Answers

Use simple negative margin rather than using display table.

Updated in fiddle JS Fiddle

.container {      border-style: solid;     border-color: red;     border-width: 1px 0 0 1px;     display: inline-block; } .column {      float: left; overflow: hidden;  } .cell {      border: 1px solid red; width: 120px; height: 20px;      margin:-1px 0 0 -1px; } .clearfix {     clear:both; } 
like image 137
iamjustcoder Avatar answered Oct 09 '22 05:10

iamjustcoder


Instead using border use box-shadow:

  box-shadow:      2px 0 0 0 #888,      0 2px 0 0 #888,      2px 2px 0 0 #888,   /* Just to fix the corner */     2px 0 0 0 #888 inset,      0 2px 0 0 #888 inset; 

Demo: http://codepen.io/Hawkun/pen/rsIEp

like image 39
user1032559 Avatar answered Oct 09 '22 06:10

user1032559