How to make borders collapse (on a div)?
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;
}
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;
}
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