假设我有标记像：
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与显示：表; border-collapse：collapse;和细胞与显示：表细胞为什么他们仍然不崩溃？我在这里失踪了什么？
顺便说一下，在列中可能有可变数量的单元格，所以我不仅可以在一边有边框。
解决方法
这里是一个
demo
首先你需要纠正你的语法错误
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;
}
