Jiew Meng Jiew Meng - 1 month ago 8
CSS Question

How to make borders collapse (on a div)?

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

here is a demo

first you need to correct your syntax error its

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