How to make borders collapse (on 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 an external div with display: table; border-collapse: collapse; display: table; border-collapse: collapse; and cells with display: table-cell , why aren't they still collapsing? What am I missing here?

By the way, there may be a variable number of cells in a column, so I can not only have borders on one side.

Answer 1

here is a demonstration

first you need to fix your syntax error,

 display: table-cell; 

not diaplay: table-cell;

  .container { display: table; border-collapse:collapse } .column { display:table-row; } .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; } 

Answer 2

Use a simple negative marker, not a mapping table.

Updated in JS Fiddle 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 3

Instead of 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

Answer 4

You need to use display: table-row instead of float: left; for your column and obviously how @Hushme to fix your diaplay: table-cell to display: table-cell;

  .container { display: table; border-collapse: collapse; } .column { display: table-row; 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; } 

demo

Answer 5

You can also use negative fields:

 .column { float: left; overflow: hidden; width: 120px; } .cell { border: 1px solid red; width: 120px; height: 20px; box-sizing: border-box; } .cell:not(:first-child) { margin-top: -1px; } .column:not(:first-child) > .cell { margin-left: -1px; } 

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

Answer 6

Why not use an outline? this is what you want the outline: 1px solid red;