How to make borders collapse (on a div)?

Question

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.

Answer 1

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; } 

Answer 2

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