如何使边界崩溃（在div上）？

假设我有这样的标记： 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> 

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

我有外面的div与display: table; border-collapse: collapse; display: table; border-collapse: collapse; 和display: table-cell为什么还没有崩溃？ 我在这里错过了什么？

顺便说一下，列中的单元格数量可以变化，所以我不仅可以在一边有边界。

Answer 1

这里是一个演示

首先你需要纠正你的语法错误

 display: table-cell; 

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

使用简单的负边距而不是使用显示表格。

在小提琴JS小提琴更新

 .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

而是使用border使用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; 

演示： http : //codepen.io/Hawkun/pen/rsIEp

Answer 4

你需要使用display: table-row来代替float: left; 你的专栏显然是@Hushme正确的你的diaplay: table-cell来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; } 

演示

Answer 5

您也可以使用负边距：

 .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

为什么不使用轮廓？ 这是你想要概述的：1px纯红色;