如何使边界(在 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;
}

You need to use display: table-row instead of float: left; to your column and obviously as @Hushme correct 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

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

Why not use outline? It is what you want:

outline: 1px solid red;

You could also use negative margins:

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

Example of using border-collapse: separate; as

ol[type="I"]>li{
display: table;
border-collapse: separate;
border-spacing: 1rem;
}

You can use borders in pseudo-elements with margins & paddings. It works with flex-wrap in multiple rows / cols.

.parent {
display: flex; /* your container */
flex-flow: column;


position: relative;
::before{
content:'';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
border: 1px solid #424041; /* your border */
}
padding: 1px 0 0 1px; /* <border-width> 0 0 <border-width> */
}


.child{
position: relative;
::before{
content:'';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
border: 1px solid #424041; /* your border */
}
margin: -1px 0 0 -1px; /* -<border-width> 0 0 -<border-width> */
}


.parentAndChild{
display: flex; /* your container */
flex-flow: row wrap;


position: relative;
::before{
content:'';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
border: 1px solid #424041; /* your border */
}
margin: -1px 0 0 -1px; /* -<border-width> 0 0 -<border-width> */
padding: 1px 0 0 1px; /* <border-width> 0 0 <border-width> */
}